【红宝书】第8章.BOM

浏览器对象模型,用于访问浏览器的功能。W3C为了把浏览器中JS最基本的部分标准化,已将BOM的主要方面纳入HTML5规范。

8.1 window对象

BOM的核心,表示浏览器实例。在浏览器中,window对象即是通过JS访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

8.1.1全局作用域

由于window对象扮演着ECMAScript中的Global对象,所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以

let age=29

window.color=”red”

delete window.age //ie<9抛出错误,在其他浏览器返回false

delete window.color //ie<9抛出错误,在其他浏览器返回true

console.log(window.age) // 29

console.log(window.color) //undefined

8.1.2窗口关系及框架(略)

8.1.3窗口位置

窗口相对于屏幕左边和上边的位置

IESafariOperaChromescreenLeftscreenTop

FirefoxSafariChromescreenXscreenY

Opera中并不对应,建议不再Opera中使用。

let leftPos = (typeof window.screenLeft == ‘number’) ? window.screenLeft : window.screenX

对于IEOpera来说screenTop是浏览器窗口和屏幕的距离,即工具栏高度

对于FirefoxSafariChrome是整个浏览器窗口和屏幕的距离,即0

即无法获取准确窗口位置

8.1.4窗口大小

innerWidthinnerHeight 页面视图区,减去边框

outerWidthouterHeight 浏览器窗口

Chrome中都为viewport大小

document.documentElement.clientWidthdocument.documentElement.clientHeight

保存了页面视口的信息

混杂模式可以用document.body.clientWidthdocument.body.clientHeight

8.1.5导航和打开窗口

window.open(要加载的url,窗口目标,特性字符串,新页面是否取代浏览器历史记录中当前加载页面的布尔值)

8.1.6间歇调用和超时调用

超时调用:setTimeout(function(){),time)

setTimeout返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过他来取消超时调用。

let timeId = setTimeout(function(){},time)

clearTimeout(timeId)

在指定的时间尚未过去之前调用clearTimeout就可以完全取消超时调用。上面的代码在设置超时调用后马上调用了clearTimeout,结果就跟什么都没发生一样。

超时调用的代码都是在全局作用域执行的,因此this非严格模式下指向window,严格模式下指向undefined

间歇调用:setInterval(function(){},time)

clearInterval(intervalId)

    let num = 0;

    let max = 10;

    let intervalId = null;

    function fn() {

      num++;

      if (num === max) {

        clearInterval(intervalId);

      }

    }

    intervalId = setInterval(fn, 500);

    intervalId = setInterval(function() {

      num++;

      if (num === max) {

        clearInterval(intervalId);

      } 

    }, 500);

超时调用没有必要跟踪超时调用ID因为每次执行完调用就会停止。

一般认为,使用超时调用来模拟间歇调用是一种最佳模式

    function fn() {

      num++;

      if (num < max) {

        setTimeout(fn, 500);

      } else {

        console.log("done");

      }

    }

    setTimeout(fn, 500);

8.1.7系统对话框

    alert('msg') // 只有确定按钮

confirm('question') // 有确认和取消,可以通过返回的布尔值判断单击的是哪个按钮

    if (confirm("Are you sure")) {

      // do something

    } else {

      // do something

    }

    prompt("tip", "initvalue"); // 提示框,提示用户输入一些文本,返回文本输入域的值,关闭时返回null

8.2 location对象

提供了当前窗口中加载的文档有关的信息,提供了一些导航功能。

即是window对象的属性,也是document对象的属性

也就是window.locationdocument.location引用的是同一个对象

    console.log(location.href)     // 完整URL

    console.log(location.protocol) // 协议

    console.log(location.hostname) // 域名(服务器名称)

    console.log(location.port)     // 端口号

    console.log(location.pathname) // 目录和文件名

    console.log(location.search)   // 查询字符串

    console.log(location.hash)     // 返回URL中的hash

    console.log(location.host)     // 域名+端口

8.2.1查询字符串参数

8.2.2位置操作

    location.assign('http://www.baidu.com') // 导航到新页面,在历史记录中生成记录,可返回先前页面

    window.location= 'https://fanyi.baidu.com/' // 调用location.assign

    location.href='https://www.zhihu.com/' // 调用location.assign

    location.replace('http://www.baidu.com') // 导航到新页面,bu生成记录,不可返回先前页面

    location.reload() // 重新加载(有可能从缓存中加载)

    location.reload(true) // 重新加载(从服务器重新加载)

8.3 navigator对象

用于检测显示网页的浏览器类型

检测插件

注册处理程序

8.4 screen对象

表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度。保存着与客户端显示器有关的信息,这些信息一般只用于站点分析。

8.5 history对象

该对象保存着用户上网的历史记录,从窗口被打开的那一刻。

history.go(num)

负数表示向后退转。正数表示向前跳转。

history.go(-1)//后退一页

history.go(2)//前进两页

也可以用history.back()

history.forward()

history.go(‘wrox.com’)  字符串参数

此时浏览器会跳转到历史记录表中包含该字符串的第一个位置。如果不包含则说明都不做。

8.6小结

猜你喜欢

转载自www.cnblogs.com/Mijiujs/p/12080377.html