BOM

2020-04-24  本文已影响0人  噢是珊珊吖

BOM 的核心对象是 window,它表示浏览器的一个实例。

一、window 对象

1. 窗口位置

IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。

Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息,Safari 和 Chrome 也同时支持这两个属性。

2. 窗口大小

IE9+、Firefox、Safari、Opera 和 Chrome 均为此提供了4个属性:innerWidth、innerHeight、outerWidth、outerHeight。

outerWidth、outerHeight 返回浏览器窗口本身的尺寸。innerWidth、innerHeight 表示页面视图区的大小(减去边框宽度)。在 Chrome 中,这4个属性返回相同的值,即视口大小而非浏览器窗口大小。

在 IE、Firefox、Safari、Opera 和 Chrome 中,document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了页面视口的信息。

3. 导航和打开窗口

window.open(),这个方法会返回一个指向新窗口的引用。

4. 间歇调用和超时调用

超时调用需要使用 window 对象的 setTimeout() 方法,它接收两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。调用 setTimeout() 之后,该方法会返回一个数值 ID,表示超时调用。要取消尚未执行的超时调用计划,可以调用 clearTimeout() 方法并将相应的超时调用 ID 作为参数传递给它。

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是 setInterval(),它接收的参数与 setTimeout() 相同。要取消尚未执行的间歇调用,可以使用 clearInterval() 方法并传入相应的间歇调用 ID。

一般认为,使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。最好不要使用间歇调用。

5. 系统对话框

alert()、confirm()、prompt()

二、location 对象

location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。它既是 window 对象的属性,也是 document 对象的属性;换句话说,window.location 和 document.location 引用的是同一个对象。

location的所有属性:hash、host、hostname、href、pathname、port、protocol、search。

位置操作

assign() 方法。location.assign("http://www.wrox.com");

如果是将 location.href 或 window.location 设置为一个 URL 值,也会以该值调用 assign() 方法。例如,下列两行代码与显式调用 assign() 方法效果完全一样。

location.href = "http://www.wrox.com";

window.location = "http://www.wrox.com";

最常用的是 location.href 。

replace() 方法、reload() 方法

三、navigator 对象

四、screen 对象

五、history 对象

go()、back()、forward()

上一篇下一篇

猜你喜欢

热点阅读