BOM

106 阅读2分钟

Browser Objcet Mode浏览器对象模型,BOM提供了一组对象,用于完成对浏览器的操作。

Window

Window对象 表示整个浏览器窗口,也是页面的全局对象,其它的几种对象都是作为window对象的属性保存的,可以通过window对象使用,也可以直接使用。

window对象有两个常用的定时器方法。

setInterval()

setInterval(fn, time)方法 定时调用函数,fn是函数,time是间隔时间(单位毫秒)。该方法有一个Number类型数据的返回值,表示这个定时器的唯一标识

clearInterval(sign)方法 关闭一个定时器,sign是定时器的标识。

        var a = 0;
        var timer = setInterval(function(){
            a++;
            console.log(a);
            if(a > 5){
                clearInterval(timer);
            }
        }, 1000);

注意如果通过绑定事件开启定时器,每次执行事件都会开启一个新的定时器,定时器的时间就会叠加,速度变快。而且无法正常关闭定时器,因为标识是唯一的,只会关闭最后一次开启的定时器。

为了解决上述问题,可以在开启新定时器之前,关闭上一个定时器。

setTimeout()

setTimeout(fn, time)方法 延迟指定的时间执行一次函数,fn是函数,time是延迟时间(单位毫秒)。

clearTimeout(sign)方法 关闭一个延迟器,sign是延迟器的标识。

Navigator

Navigator对象 表示当前浏览器的信息,用户代理的状态和标识。

navigator.userAgent属性 返回一个字符串(包含发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号),这个属性常用于判断浏览器类型。

如果要判断当前浏览器是否是IE,可以使用IE的特有对象比如ActiveXObject

        console.log('ActiveXObject' in window); // false

Location

Location对象 表示当前浏览器的地址栏信息。

location.assign(url)方法 加载新的文档。

location.reload()方法 重新加载当前文档,如果把true作为参数传入,会强制清除缓存再刷新页面。

location.replace(url)方法 用新的文档替换当前文档并且清除历史记录。

History

History对象 表示浏览器的历史记录,只能操作浏览器向前/后翻页查询历史记录。

history.length属性 返回当次访问链接的数量。

history.back()方法 跳转到上一个页面。

history.forwar()方法 跳转到下一个页面。

history.go(num)方法 跳转到指定页面,num参数表示跳转页面的数量,正值向前跳转,负值向后跳转。

Screen

Screen对象 表示用户屏幕的信息,可以获取用户显示器的相关信息。