JavaScript红皮书学习(8)--BOM

Posted by liveipool on December 25, 2016

BOOOOOOOOM

ECMAScript是JavaScript的核心,但如果要在Web浏览器中使用JavaScript,那么BOM(浏览器对象模型 Browser Object Module)则无疑才是真正的核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页的内容无关。
多年来,缺少规范倒是BOM既有意思又有问题,因为浏览器提供商会按照各自的想法去随意扩展它。于是,浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在,很大程度上是由于它们提供了浏览器的互操作性。W3C为了把浏览器中的JavaScript最基本的部分标准化,已经把BOM的主要方面纳入了HTML5的规范中。

8.1 window对象

BOM的核心对象是window,它表示浏览器的一个实例
在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器的一个接口,又是ECMAScript规定的Global对象。 这意味着在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象。

8.1.1 全局作用域

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

var age = 29;
function say() {
	consolo.log(this.age);
}

alert(window.age);   //29
sayAge();            //29
window.sayAge();     //29

抛开全局变量会称为window对象的属性不谈,定义全局变量与在window对象上直接定义属性还是有一点区别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。

var age = 29;
window.color = "red";
delete window.age;
delete window.color;

alert(window.age);     //29
alert(window.color);   //undefinded

刚才是用var语句添加的window属性有一个名为[[Configurable]]的特性,这个特性的值被设置为false,因此这样定义的属性不可以通过delete操作符删除。
另外,尝试未声明的变量会抛出错误,但是通过查询window对项,可以知道某个可能未声明的变量是否存在。

console.log(newValue);         //报错
console.log(window.newValue);  //undefined

8.1.2 窗口位置

有四个表示位置的属性,screenX、screenLeft、screenTop、screenY,它们在不同的浏览器上受支持的程度不同,值也不太确定,用处不大。
还有两个移动位置的方法,moveTo()和moveBy(),但基本被浏览器禁用了.

8.1.3 窗口大小

  • 跨浏览器确定一个窗口的大小不是一个简单的事.在主流的IE9+、FireFox、Safari、Opera、Chrome有六个属性可以显示浏览器的相关大小信息,可不同的属性在不同浏览器上值也不同,属性有:innerWidth、innerHeight、outerWidth、outerHeight(这四个都是window的属性)、document.documentElement.clientHeight、document.documentElement.clientWidth。
  • 另外还有两个方法说可以调整浏览器窗口的大小,resizeTo()resizeBy()很多浏览器都将它们禁用了。
  • innerWidth:浏览器视口(viewport)宽度,如果存在垂直滚动条则包括它。不属于标准。
  • outerHeight: 获取整个浏览器窗口的高度,包括侧边栏(如果存在)、窗口镶边和窗口调正边框。只读,没有默认值。不属于标准。
  • clientHeight: 返回元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算。暂不属于标准,在CSSDOM的草案中。

8.1.4 导航和打开窗口

使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口.这个方法可以接收四个参数:1.要加载的URL 2.窗口目标 3.一个特性字符串 4.一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值.
这种方法很可能会被浏览器带的一些扩展程序屏蔽掉.试了一下,Chrome还是可以用这个方法的.

8.1.5 间歇调用和超时调用

8.1.6.png

间歇调用与超时调用相似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载.
间歇调用也可以用超时调用来实现:

8.1.62.png

8.1.6 系统对话框

8.1.71.png
8.1.72.png
8.1.73.png

8.2 location对象

8.21.png
8.22.png
8.2.2.png
8.2.22.png
8.2.23.png

8.3 navigator 对象

8.3.png

8.4 history 对象

8.51.png
8.52.png
还有一个window.screen对象,不过确实作用不大,就不说了.

8.5 小结

8.6.png

相关文章链接