《HTML5权威指南》之使用window对象
1.获取window对象
可以用两种方式获得window对象，一种是使用document.defaultView，另外一种是使用所有浏览器都支持的全局变量window。
2.获取窗口信息
window对象的基本功能都是关于当前文档所显示的窗口的。下面说明窗口相关成员：
名称 说明 返回值
innerHeight 获取窗口内容区域的高度 数值
innerWidth 获取窗口内容区域的宽度 数值
outerHeight 获取窗口的高度，包括边框和菜单栏 数值
outerWidth 获取窗口的宽度，包括边框和菜单栏 数值
pageXOffset 获取窗口从左上角算起水平滚动过的像素数 数值
pageYOffset 获取窗口从左上角算起垂直滚动过的像素数 数值
screen 返回一个描述屏幕的Screen对象 数值
screenLeft 获取从窗口左边缘到屏幕左边缘的像素数 数值
screenX
screenTop 获取从窗口上边缘到屏幕上边缘的像素数 数值
screenY
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
<style>
table {
border-collapse: collapse;
border: thin solid black;
}
th,td {
padding: 4px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>outerWidth:</th><td id="ow"></td><th>outerHeight:</th><td id="oh"></td>
</tr>
<tr>
<th>innerWidth:</th><td id="iw"></td><th>innerHeight:</th><td id="ih"></td>
</tr>
<tr>
<th>screen.width:</th><td id="sw"></td><th>screen.height:</th><td id="sh"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("ow").innerHTML = document.defaultView.outerWidth;
document.getElementById("oh").innerHTML = document.defaultView.outerHeight;
document.getElementById("iw").innerHTML = document.defaultView.innerWidth;
document.getElementById("ih").innerHTML = document.defaultView.innerHeight;
document.getElementById("sw").innerHTML = document.defaultView.screen.width;
document.getElementById("sh").innerHTML = document.defaultView.screen.height;
</script>
</body>
</html>
screen对象有一些属性，下面对这些属性说明：
名称 说明 返回
availHeight 屏幕上可供显示窗口部分的高度（排除工具栏和菜单栏） 数值
availWidth 屏幕上可供显示窗口部分的宽度（排除工具栏和菜单栏） 数值
colorDepth 屏幕颜色的深度 数值
height 屏幕的高度 数值
width 屏幕的宽度 数值
3.与窗口进行交互
window对象提供了一种方法，可以用它们与包含文档的窗口进行交互，下面做出总结：
名称 说明 返回
blur() 让窗口时区键盘焦点 void
close() 关闭窗口（不是所有浏览器都支持） void
focus() 让窗口获得键盘焦点 void
print() 提示用户打印页面 void
scrollBy(<x>,<y>) 让文档相对于当前位置进行滚动 void
scrollTo(<x>,<y>) 滚动到指定的位置 void
stop() 停止载入文档 void
4.对用户进行提示
window对象包含一组方法，能以不同的方式对用户进行提示，如下：
名称 说明 返回
alert(msg) 向用户显示一个对话框并等候其关闭 void
confirm(msg) 向用户显示一个带有确认和取消提示的对话框 布尔值
prompt(msg,val) 显示对话框，提示用户输入一个值 字符串
showModalDialog(url)弹出一个对话框，显示指定的URL void
5.获取基本信息
window对象能够返回某些基本信息对象，如下：
名称 说明 返回
document 返回与此窗口关联的document对象 Document
history 提供对浏览器历史的访问 History
location 提供当前文档地址的详细信息 Location
说明：window.document和document对象是一样的，window.location和document.location对象是一样的。
6.使用浏览器历史
window.history属性返回一个History对象，可以用它对浏览器历史进行一些操作。下面介绍History对象定义的一些属性和方法。
名称 说明 返回
back() 在浏览器中后退一步 void
forward() 在浏览器中前进一步 void
go(<index>) 转到相对于当前文档某个浏览历史位置，正值是前进，负值是后退 void
length 返回浏览器历史中的项目数量 数量
pushState(<state>,<title>,<url>) 向浏览器中添加一条目 void
replaceState(<state>,<title>,<url>) 替换浏览器历史中的当前条目 void
state 返回浏览器历史中关联文档状态的数据 对象
示例代码如下：
<script>
<!--在浏览历史中后退一步-->
window.history.back();
<!--在浏览历史中添加一条历史记录,只是附加当前文档链接之后的一些搜索字符串-->
window.history.pushState("","","?","test");
window.history.go("http://www.baidu.com");
<!--在浏览历史中添加一条历史记录,添加新的文档，仍跟当前文档在同一域-->
window.history.pushState("","","otherpage.html?"+ "test")
stateObj = {name:"apple",color:"red",size:"small"};
在浏览历史中添加复杂的状态
window.history.pushState(stateObj,"");
<script>
7.使用跨文档消息传递
浏览器通过URL的各个组成部分来判断某个资源的来源，不同来源的脚本间会被加上交互和通信限制，如果两个脚本的协议，主机名和端口号相同，那么它们被认为是拥有同一源。下面的URL都是与http://www.mydomain.com/test1.html进行同源比较：
URL 结果
http://www.mydomain.com/other.html 来源相同
https://www.mydomain.com/test2.html 来源不同,协议不一样
http://www.mydomain.com:81/test2.html 来源不同，端口号不同
http://myserver.domain.com/test2.html 来源不同，主机不一样
HTML5通过window里的方法为这类通信提供了一种规范，如下：
名称 说明 返回
postMessage(<msg>,<origin>) 给另一个文档发送指定的消息 void
window对象提供了寻找内嵌文档所需的支持，如下：
名称 说明 返回
defaultView 返回活动文档的window window
frames 返回文档内嵌iframe元素的的window对象数组 window[]
opener 返回打开当前浏览上下文环境的window window
parent 返回当期文档的父文档 window
self 返回当前文档的window window
top 返回最上层文档 window
length 返回文档内嵌的iframe元素的数量 数值
[<index>] 返回指定索引位置内嵌文档的window window
[<name>] 返回指定名称内嵌文档的window window
示例代码：
<h1 id="banana"> </h1>
<p>
<iframe name="nested" src="http://www.mydomain.com:81/otherpage.html"></iframe>
</p>
<script>
window["nested"].postMessage("I like apple","http://www.mydomain.com:81")
</script>
otherpage.html的主要内容：
<script>
window.addEventListener("message",receiveMessage,false);
function receiveMessage(e) {
if (e.origin == "http://www.mydomain.com") {
displayMessage(e.data);
}
}
function displayMessage(msg) {
document.getElementById("banana").innerHTML = msg;
}
</script>
在otherpage.html使用addEventListener事件进行监听，浏览器会传递一个MessageEvent对象，其属性如下：
名称 说明 返回
data 返回别的脚本发送的消息 对象
origin 返回发送消息脚本的来源 字符串
source 返回发送消息脚本所关联的窗口 window
8.使用计时器
window对象提供了一个有用的功能是可以设置一次性和循环计数器，这些计时器被用于在预设时间段后执行某个函数，下面进行说明：
名称 说明 返回
clearInterval(<id>) 撤销某个时间间隔计时器 void
clearIimeout(<id>) 撤销某个超时计时器 void
setInterval(<function>,<time>) 创建一个计时器，每隔time时间间隔调用指定函数 整数
setTimeout(<function>,<time>) 创建一个计时器，等待time时间后调用指定函数 整数
setTimeout()是等待多少时间后执行某个函数，函数只执行一次，而setInterval()是每隔多长时间执行指定函数，无限重复下去。另外需要说明的是，向这两个函数传递函数名时，不能加括号。例如： window.setInterval(myfunc,20)而不是window.setInterval(myfunc(),20)。
1236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
