【红宝书】第8章.BOM

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

8.1 window对象

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

8.1.1全局作用域

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

var age=29
delete window.age //ie<9抛出错误，在其他浏览器返回false
console.log(window.age) // 29

window.color=”red”
delete window.color //ie<9抛出错误，在其他浏览器返回true
console.log(window.color) //undefined

8.1.2窗口关系及框架

页面包含多个框架，每个框架都会有自己的window对象，并且保存在frames集合中。

8.1.3窗口位置

浏览器窗口相对于电脑屏幕左边和上边的位置

screenLeft、screenTop：IE、Opera、Safari、Chrome

screenX、screenY：Firefox、Safari、Chrome（Opera中并不对应，建议不再Opera中使用）

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

对于IE、Opera来说是页面可见区域相对于屏幕的距离，screenTop即工具栏高度，对于Firefox、Safari、Chrome是整个浏览器窗口相对于屏幕的坐标值，即无法获取准确窗口位置

可以用moveTo(x,y)屏幕移动到0,0

或moveBy(x,y)屏幕向右移动x，向下移动y

不过这两个又会被浏览器禁用。。。。

8.1.4窗口大小

innerWidth、innerHeight:页面视图区，减去边框

outerWidth、outerHeight:浏览器窗口

或者通过以下方法获取保存了页面视口的信息

document.documentElement.clientWidth、document.documentElement.clientHeight

混杂模式可以用document.body.clientWidth、document.body.clientHeight

可以用resizeTo(x,y)（接受浏览器窗口的新宽度和新高度）、resizeBy(x，y)（新旧窗口宽度和高度差）

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

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

 

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

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

    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

    let result = prompt('your name','lpr')
    if(result!==null){}else{}

8.2 location对象

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

即是window对象的属性，也是document对象的属性，也就是window.location和document.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') // 导航到新页面，不生成记录，不可返回先前页面
    location.reload() // 重新加载(有可能从缓存中加载)
    location.reload(true) // 重新加载(从服务器重新加载)

8.3 navigator对象

用于检测显示网页的浏览器类型，检测插件，注册处理程序

8.4 screen对象

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

8.5 history对象

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

history.go(num)负数表示向后退转。正数表示向前跳转。

history.back()后退一页

history.forward()前进一页

history.length,保存着历史记录的数量

history.go(‘wrox.com’) 当参数为字符串时，此时会跳转到历史记录中包含该字符创的第一个位置，因此可能后退可能前进。如果不包含则什么都不做。

8.6小结