前端基础：JavaScript BOM对象

JavaScript BOM对象

JavaScript Window - 浏览器对象模型

浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话"。

浏览器对象模型(BOM)

浏览器对象模型(Browser Object Model：BOM)尚无正式标准，由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

Window对象

所有浏览器都支持window对象，它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动称为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法，甚至HTML DOM的document也是window对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

Window尺寸

有三种方法能够确定浏览器窗口的尺寸，对于IE、Chrome、FireFox、Opera语句Safari：

• window.innerHeight：浏览器窗口的内部高度(包括滚动条)
• window.innerWidth：浏览器窗口的内部宽度(包括滚动条)

对于IE8、7、6、5：

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

或者

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

实用的JavaScript方案(涵盖所有浏览器)：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

其他Window方法

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

JavaScript Window Screen

widow.screen对象包含有关用户屏幕的信息。

Window Screen

window.screen对象在编写时可以不使用window这个前缀，其属性有：

• screen.availWidth：可用的屏幕宽度
• screen.availHeight：可用的屏幕高度

Window Screen 可用宽度

screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏：

<script>
document.write("可用宽度: " + screen.availWidth);            // 返回屏幕可用宽度：1920
</script>

Window Screen 可用高度

scree.availHeight属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏：

<script>
document.write("可用高度: " + screen.availHeight);            // 返回屏幕可用高度：1040
</script>

JavaScript Window Location

window.location对象用于获取当前页面的地址(URL)，并把浏览器重定向到新的页面。

Window Location

window.location对象在编写时可不使用window这个前缀，如下例子：

• location.hostname：返回web主机的域名；
• location.pathname：返回当前页面的路径和文件名；
• location.port：返回web主机的端口(80或443)；
• location.protocol：返回所使用web协议(http://或https