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这个前缀，如下例子：