浏览器对象模型 (BOM)

https://github.com/stone0090/javascript-lessons/tree/master/2.1-BOM

ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范导致 BOM 有很多问题，因为浏览器提供商会按照各自的想法随意去扩展它。W3C 为了把浏览器中 JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。

1、Window 对象

BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 isNaN()、isFinite()、parseInt()、parseFloat() 等方法。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：window.document.getElementById("header");

2、Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

1 var w=window.innerWidth
2 || document.documentElement.clientWidth
3 || document.body.clientWidth;
4 
5 var h=window.innerHeight
6 || document.documentElement.clientHeight
7 || document.body.clientHeight;

3、其他 Window 方法

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

4、window.screen对象

该对象包含有关用户屏幕的信息可用屏幕的高度:window.screen.availWidth;

可用屏幕的宽度:window.screen.availHeight;

注:返回访问者屏幕的宽高都是以像素计,减去界面特性,比如窗口任务栏等

5、window.location对象

该对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面

location.hostname 返回web主机的域名

location.pathname返回当前页面的路径和文件名

locaton.port返回web主机的端口(80or443)

location.protocl返回所使用的web协议(http://或https://)

location.href返回当前页面的url