《HTML5权威指南》之使用window对象

来源：互联网发布：php所有的数据类型编辑：程序博客网时间：2024/06/05 08:40

《HTML5权威指南》之使用window对象

1.获取window对象

可以用两种方式获得window对象，一种是使用document.defaultView，另外一种是使用所有浏览器都支持的全局变量window。

2.获取窗口信息

window对象的基本功能都是关于当前文档所显示的窗口的。下面说明窗口相关成员：

名称              说明                                          返回值innerHeight     获取窗口内容区域的高度                             数值innerWidth      获取窗口内容区域的宽度                             数值outerHeight     获取窗口的高度，包括边框和菜单栏                    数值outerWidth      获取窗口的宽度，包括边框和菜单栏                    数值pageXOffset     获取窗口从左上角算起水平滚动过的像素数               数值pageYOffset     获取窗口从左上角算起垂直滚动过的像素数               数值screen          返回一个描述屏幕的Screen对象                       数值screenLeft      获取从窗口左边缘到屏幕左边缘的像素数                 数值screenXscreenTop       获取从窗口上边缘到屏幕上边缘的像素数                数值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()              让窗口时区键盘焦点                   voidclose()             关闭窗口（不是所有浏览器都支持）       voidfocus()             让窗口获得键盘焦点                   voidprint()             提示用户打印页面                     voidscrollBy(<x>,<y>)   让文档相对于当前位置进行滚动           voidscrollTo(<x>,<y>)   滚动到指定的位置                     voidstop()              停止载入文档                         void

4.对用户进行提示

window对象包含一组方法，能以不同的方式对用户进行提示，如下：

名称                  说明                                      返回alert(msg)          向用户显示一个对话框并等候其关闭            voidconfirm(msg)        向用户显示一个带有确认和取消提示的对话框        布尔值prompt(msg,val)     显示对话框，提示用户输入一个值             字符串showModalDialog(url)弹出一个对话框，显示指定的URL                void

5.获取基本信息

window对象能够返回某些基本信息对象，如下：

名称          说明                                  返回document    返回与此窗口关联的document对象         Documenthistory     提供对浏览器历史的访问                 Historylocation    提供当前文档地址的详细信息               Location

说明：window.document和document对象是一样的，window.location和document.location对象是一样的。

6.使用浏览器历史

window.history属性返回一个History对象，可以用它对浏览器历史进行一些操作。下面介绍History对象定义的一些属性和方法。

名称              说明                                                      返回back()          在浏览器中后退一步                                           voidforward()       在浏览器中前进一步                                           voidgo(<index>)     转到相对于当前文档某个浏览历史位置，正值是前进，负值是后退         voidlength          返回浏览器历史中的项目数量                                     数量pushState(<state>,<title>,<url>)  向浏览器中添加一条目                        voidreplaceState(<state>,<title>,<url>) 替换浏览器历史中的当前条目                 voidstate           返回浏览器历史中关联文档状态的数据                              对象

示例代码如下：

<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                           windowframes          返回文档内嵌iframe元素的的window对象数组      window[]opener          返回打开当前浏览上下文环境的window                windowparent          返回当期文档的父文档                          windowself            返回当前文档的window                           windowtop             返回最上层文档                             windowlength          返回文档内嵌的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>)                 撤销某个时间间隔计时器                         voidclearIimeout(<id>)                  撤销某个超时计时器                               voidsetInterval(<function>,<time>)      创建一个计时器，每隔time时间间隔调用指定函数        整数setTimeout(<function>,<time>)       创建一个计时器，等待time时间后调用指定函数     整数

setTimeout()是等待多少时间后执行某个函数，函数只执行一次，而setInterval()是每隔多长时间执行指定函数，无限重复下去。另外需要说明的是，向这两个函数传递函数名时，不能加括号。例如： window.setInterval(myfunc,20)而不是window.setInterval(myfunc(),20)。

阅读全文

0 0