>

获取浏览器宽度和惊人,浏览器对象模型

- 编辑:正版管家婆马报彩图 -

获取浏览器宽度和惊人,浏览器对象模型

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

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

)。

浏览器对象模型 (BOM)

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

浏览器对象模型(BrowserObjectModel)尚无正式标准。

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

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

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

Window 对象

document.documentElement.clientHeight
document.documentElement.clientWidth

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

或者

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

document.body.clientHeight
document.body.clientWidth

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

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

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

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

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

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

window.document.getElementById("header");

---------------------完整的例子---------------------

与此相同:

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

document.getElementById("header");

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

Window 尺寸

x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"
</script>

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

注:所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。其他 Window 方法:

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

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

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

)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:...

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

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

document.documentElement.clientHeight

document.documentElement.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() - 调整当前窗口的尺寸

本文由web前端发布,转载请注明来源:获取浏览器宽度和惊人,浏览器对象模型