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

最新推荐文章于 2024-09-05 11:13:47 发布

谁为峰

最新推荐文章于 2024-09-05 11:13:47 发布

阅读量1.5k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/feng16027mei/article/details/77856277

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

《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)。