JS 浏览器 BOM 之 JavaScript Window

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

JS 浏览器 BOM

浏览器对象模型 (Browser Object Model (BOM)) 使 JavaScript 有能力与浏览器"对话"，其尚无正式标准

由于现代浏览器实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

JavaScript Window

1、Window 对象

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

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

全局变量是 window 对象的属性。全局函数是 window 对象的方法。
HTML DOM 的 document 也是 window 对象的属性之一
window.document.getElementById("header");
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

那么，有没有一种涵盖所有浏览器的方法来确定浏览器窗口的尺寸呢？

答案是有的。(其实就是用 或 || 进行一个简单的方法叠加)

如下实例：显示浏览器窗口的高度和宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>确定浏览器窗口大小练习</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
var h=window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>