HTML5权威指南——使用window对象

最新推荐文章于 2025-01-16 09:25:41 发布

gyypwrs

最新推荐文章于 2025-01-16 09:25:41 发布

阅读量1.7k

点赞数 3

分类专栏： HTML5权威指南文章标签： html5

本文链接：https://blog.youkuaiyun.com/gyypwrs/article/details/110094502

版权

HTML5权威指南专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨HTML5中的window对象，包括获取window对象、窗口信息、与窗口交互、用户提示、基本信息获取、浏览器历史的使用以及跨文档通讯和计时器的应用。重点讲解了window.history的导航方法和pushState、replaceState在管理浏览历史中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取window对象

获取window对象有两种方式一个是document.defaultView,一种是全局变量window

var width = window.outerWidth
var height = document.defaultView.height

获取窗口信息

在这里插入图片描述

特别的是window.screen对象还有以下几个属性值

与窗口进行交互

谨慎使用以下的几个功能吧，窗口的控制应该由用户来决定

对用户进行提示

对用户进行提示的这几个方法我好像在学之初都用过，就不一一写啦

获取基本信息

window对象能够返回基本信息的对象如window.document(返回与此窗口相关联的document对象),window.history（提供对浏览器历史的访问）,window.loaction（提供当前文档地址的详细信息）

使用浏览器历史

下面是window.history的对象和方法：
在这里插入图片描述
1.在浏览历史中导航

back，forward，go这三个方法告诉浏览器该导航到浏览历史中的那个url上，back/forward这两个的效果如同浏览器上的回退和前进两个按钮。go方法会导航到相对与当前文档的历史位置上，正值表示前进，负值表示后退。

window.history.back()//后退
window.history.forward()//前进
window.history.go()//以当前页为基准想到哪就到哪

2.在浏览历史中插入条目

history.pushState方法能够给浏览器历史中添加一个URL，但是添加的URL的服务器名称和端口号必须与当前文档相同，添加的方法就是只是用附在当前文档后面的查询字符串或者锚片段。使用方法如下所示

window.history.pushState("","","?"+targetURL)

在这里插入图片描述

window.history.pushState(stateObject,title,URL)中三个参数分别代表状态对象（第四点会说），标题（有些浏览器会忽略此参数，因此不写也罢，但是写上比较安全呀），最后一个就是地址啦（不指定就是当前文档，注意传入的URL必须是同源的，不然会报错）

3.为不同的文档添加条目

也是用window.history.pushState()方法，不同的地方在于最后一个参数的写法,如下

window.history.pushState("","","otherpage.html?"+targetURL)

此方法的一个陷阱就在于不同的浏览器对当导航至别的文档时，点击后退按钮时浏览器的后退的地方会不一致，有的浏览器会导航至当前文档，有的浏览器会选择导航之原文档（原文档就是使用此方法的文档）

4.在浏览器中保存复杂的状态

保存状态就会用到pushState（）方法中的第一个参数。例如

var stateObj = {
	name: "apple",
	color: "red",
	size" "medium"
}
window.history.pushState(stateObj,"")//将该状态对象绑定至当前文档

当一些文档需要根据用户的选择做出不一样的响应的时候就可以用到这个。

5.替换浏览历史中的条目

使用window.history.replaceState()方法替换历史中的条目。参数同pushState一样。replaceState（）方法和pushState()方法的区别在于，replaceState（）方法是修改当前的历史纪录项，而不是像pushState（）新建一个历史记录项。
更详细的区别可以参考此文章简单聊聊H5的pushState与replaceState的用法

使用跨文档通讯

只要不是同源的文档进行通讯都算是跨文档通讯。所谓的同源就是文档的协议号，端口号，以及主机号三者都相同。下表是与URL http://store.company.com/dir/page.html的源进行对比的示例：

URL	结果
http://store.company.com/dir2/other.html	同源，只有路径不一样
https: //store.company.com/secure.html	不同源，协议不同
http://store.company.com :81/dir/etc.html	不同源，端口号不同
http://news.company.com/dir/other.html	不同源，主机不同

使用iframe元素载入一个不同来源的文档,并用postMessage给另一个文档发送指定的消息如下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      
    </style>
  </head>
  <body>
    <button id="send">Send</button>
    <iframe name="nested" src="http://titan:81/otherdomain.html" width="90%" height="75px" ></iframe>
    <script>
      document.getElementById("send").onclick = function (){
        window["nested"].postMessage("I like apples","http://titan:81")//当调用postMessage方法时目标来源错误，浏览器就会丢弃这条消息
      }
    </script>
  </body>
</html>

使用计时器

window对象提供一个设置一个循环或者一次性的计时器，用于在预设的某个时间段后执行某个函数

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      
    </style>
  </head>
  <body>
    <p id="msg"></p>
    <p>
      <button id="settime">Set Time</button>
      <button id="cleartime">Clear Time</button>
      <button id="setinterval">Set Interval</button>
      <button id="clearinterval">Clear Interval</button>
    </p>
    <script>
      var buttons = document.getElementsByTagName("button")
      var timeID;
      var intervalID;
      var count = 0;
      for (let i = 0;i<buttons.length;i++){
        buttons[i].onclick = function (e){
          if(e.target.id == "settime"){
            timeID = window.setTimeout(function(){
              displayMsg("Timeout Expired");
            },5000);
            displayMsg("Timeout Set")
          } else if (e.target.id == "cleartime"){
            window.clearTimeout(timeID);
            displayMsg("Timeout Cleared");
          } else if (e.target.id == "setinterval"){
            intervalID = window.setInterval(function(){
              displayMsg("Interval expired. Counter:"+ count++);
            },2000);
            displayMsg("Interval Set");
          } else if (e.target.id == "clearinterval" ){
            window.clearInterval(intervalID);
            displayMsg("Interval Cleared")
          } 
        }
      }
      function displayMsg(msg) {
        document.getElementById("msg").innerHTML = msg; 
      }
    </script>
  </body>
</html>