window

⬅️⬅️ 一些经典常用功能 | 参考阅读：使用 JavaScript 来操作 DOM

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

Note注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

Window对象方法

🔝🔝 window

方法	描述
[alert()]	显示带有一段消息和一个确认按钮的警告框。
[atob()]	解码一个 base-64 编码的字符串。
[btoa()]	创建一个 base-64 编码的字符串。
[blur()]	把键盘焦点从顶层窗口移开。
[clearInterval()]	取消由 setInterval() 设置的 timeout。
[clearTimeout()]	取消由 setTimeout() 方法设置的 timeout。
[close()]	关闭浏览器窗口。
[confirm()]	显示带有一段消息以及确认按钮和取消按钮的对话框。
[createPopup()]	创建一个 pop-up 窗口。
[focus()]	把键盘焦点给予一个窗口。
[getSelection()]	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
[getComputedStyle()]	获取指定元素的 CSS 样式。
[matchMedia()]	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
[moveBy()]	可相对窗口的当前坐标把它移动指定的像素。
[moveTo()]	把窗口的左上角移动到一个指定的坐标。
[open()]	打开一个新的浏览器窗口或查找一个已命名的窗口。
[print()]	打印当前窗口的内容。
[prompt()]	显示可提示用户输入的对话框。
[resizeBy()]	按照指定的像素调整窗口的大小。
[resizeTo()]	把窗口的大小调整到指定的宽度和高度。
scroll()	已废弃。 该方法已经使用了 scrollTo() 方法来替代。
[scrollBy()]	按照指定的像素值来滚动内容。
[scrollTo()]	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
[stop()]	停止页面载入。

setTimeout

🔝🔝 window

• setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
• 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

1000 毫秒= 1 秒。
如果你只想重复执行可以使用 setInterval() 方法。
使用 clearTimeout() 方法来阻止函数的执行。

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

• code/function必需。要调用一个代码串，也可以是一个函数。
• milliseconds可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
• param1, param2, ...可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

scrollTo

🔝🔝 window

scrollTo() 方法可把内容滚动到指定的坐标。

scrollTo(xpos,ypos);

• xpos必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
• ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

setInterval

🔝🔝 window

• setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
• setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
• 返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。

提示： 1000 毫秒= 1 秒。
提示： 如果你只想执行一次可以使用 setTimeout() 方法。

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)

• code/function必需。要调用一个代码串，也可以是一个函数。
• milliseconds必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
• param1, param2, ...可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

setInterval示例

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}

//传递参数给 alertFunc 函数 ( IE9 及其更早版本不支持):
var myVar;

function myStartFunction() {
    myVar = setInterval(alertFunc, 2000, "Runoob", "Google");
}

//但是，如果使用匿名函数，则所有浏览器都支持：
var myVar;

function myStartFunction() {
    myVar = setInterval(function(){ alertFunc("Runoob", "Google"); }, 2000);
}

Window对象属性

🔝🔝 window

属性	描述
[closed]	返回窗口是否已被关闭。
[defaultStatus]	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅对象)
[frames]	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
[history]	对 History 对象的只读引用。请参数 History 对象。
[innerHeight]	返回窗口的文档显示区的高度。
[innerWidth]	返回窗口的文档显示区的宽度。
[localStorage]	在浏览器中存储 key/value 对。没有过期时间。
[length]	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
[name]	设置或返回窗口的名称。
[navigator]	对 Navigator 对象的只读引用。请参数 Navigator 对象。
[opener]	返回对创建此窗口的窗口的引用。
[outerHeight]	返回窗口的外部高度，包含工具条与滚动条。
[outerWidth]	返回窗口的外部宽度，包含工具条与滚动条。
[pageXOffset]	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
[pageYOffset]	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
[parent]	返回父窗口。
[screen]	对 Screen 对象的只读引用。请参数 Screen 对象。
[screenLeft]	返回相对于屏幕窗口的x坐标
[screenTop]	返回相对于屏幕窗口的y坐标
[screenX]	返回相对于屏幕窗口的x坐标
[sessionStorage]	在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
[screenY]	返回相对于屏幕窗口的y坐标
[self]	返回对当前窗口的引用。等价于 Window 属性。
[status]	设置窗口状态栏的文本。
[top]	返回最顶层的父窗口。

location

🔝🔝 window

Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

Location对象属性

🔝🔝 location

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

search

• 🔝🔝 Location对象属性

search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

//http://www.runoob.com/submit.htm?email=someone@ example.com
location.search//?email=someone@example.com

href

• 🔝🔝 Location对象属性

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

location.href//https://www.runoob.com/jsref/prop-loc-href.html

hostname

• 🔝🔝 Location对象属性

hostname 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名。

location.hostname//www.runoob.com

Location对象方法

🔝🔝 location

方法|说明 assign()|载入一个新的文档 reload()|重新载入当前文档 replace()|用新的文档替换当前文档

reload

重新载入当前文档

location.reload(forceGet)

forceGet——Boolean——可选。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。

• reload()方法用于刷新当前文档。
• reload() 方法类似于你浏览器上的刷新页面按钮。
• 如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

assign

• 🔝🔝 Location对象方法

assign()方法加载一个新的文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function newDoc(){
    window.location.assign("http://www.runoob.com")
}
</script>
</head>
<body>

<input type="button" value="载入新文档" onclick="newDoc()">

</body>
</html>