javascript中的BOM-原创手记-慕课网

window对象

我们知道定义在全局的变量或者函数都是window对象上的属性和方法.但是全局变量和window对象上的属性或者方法还是有不同的.

比如我们访问一个未声明的变量会报错:" ReferenceError: xxx is not defined(…)",但是我们访问下window对象上的这个属性,其值就是undefined而并不会报错!

窗口关系和框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架名称来访问相应的window对象。每个window对象都有一个name属性,其中包含框架的名称。

窗口大小的确定

outerWidth,outerHeight:浏览器窗口大小.你可以将浏览器当成一个普通的应用程序.
innerWidth,innerHeight:可视区窗口大小.如果不明白可以打开开发者控制台看看(打开开发者控制台可以明显发现可视区的高度即innerHeight变小了)

可视区大小

现代浏览器document.documentElement.clientWidth和document.documentElement.clientHeight(IE6的标准模式下也有效)
IE6混杂模式:document.body.clientWidth和document.body.clientHeight
混杂模式的chrome以上两种都可以.

综上所述,获得可视区大小可以有以下的兼容写法:

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight

if (typeof pageWidth != 'number') {
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth
        pageHeight = document.documentElement.clientHeight
    } else {
        pageWidth = document.body.clientWidth
        pageHeight = document.body.clientHeight
    }
}

之所以不使用window.innerWidth和window.innerHeight的原因就是移动的IE不支持.

如何检测用户屏蔽了弹窗

如果是浏览器本省屏蔽的弹窗那么window.open()通常会返回null,而如果是浏览器拓展屏蔽了弹窗通常window.open()将会抛出错误.所以应该使用try-catch包围.

var blocked = false

try {
    var wroxWin = window.open('http://www.youku.com')
    if (wroxWin === null) {
        blocked = true
    }
} catch (ex) {
    blocked = true
}

if (blocked) {
    console.log('this popup was blocked')
}

浅谈setTimeout和setInterval

这两个函数中的this是在全局作用域下,非严格模式下是window,严格模式下是udnefined

setTimeout的第二个参数表示等待多长时间执行该函数,但是这个时间是不确定的.这是因为js是单线程的解释器,在一定时间只能执行一段代码.为了控制要执行的代码,就
有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。 setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。

一般认为,使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而使用setTimeout来模拟setInterval完全可以避免这一点.

Tips:我们除了可以使用window.confirm(),window.alert(),window.prompt()来打开浏览器提示框外,还可以通过window.print()和window.find()来打开查找和打印系统对话框.

location对象

该对象即是window对象上的属性,也是document上的属性,也就是说:

window.location === document.location // true

解析查询字符串

'use strict'
let getQueryStringArgs = () => {
    // 取得查询字符串并去掉开头的问号
    let qs = location.search.length > 0 ? location.search.substring(1) : ''
    // 保存数据
    let args = {}
    // 取得每一项
    let items = qs.length ? qs.split('&') : []

    for (let i = 0; i < items.length; i++) {
        let item = items[i].split('=')
        // 用 decodeURIComponent() 分别解码 name 和 value (因为查询字符串应该是被编码过的)
        let name = decodeURIComponent(item[0])
        let value = decodeURIComponent(item[1])

        if (name.length) {
            args[name] = value
        }
    }

    return args
}

其实在node中提供了专门的querystring模块可以方便地进行查询字符串的操作.

Tips:location.reload()会按照最有效的方式重新加载,也就是从缓存中读取数据,如果需要强制从服务端获取则可以给reload()传递参数true,我们最好将此代码放到最后一行.

navigator

众所周知,使用该对象我们可以得到用户浏览器的详细信息.我们还可以根据此对象的onLine属性判断联网状态.