HTML BOM上(主要是window对象的总结)

什么是BOM？
BOM，Browser Object Model，即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。
不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，BOM没有官方标准，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所以直接使用BOM会有兼容性问题。
BOM包含哪些内容?
BOM有一个核心对象window，window对象包含了6大核心模块，分别是：
document对象，即文档对象
frames，即HTML自框架
history，即页面的历史记录
location，即当前页面的地址
navigator，包含浏览器相关信息
screen，用户显示屏幕相关属性

Window 对象的属性

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

窗口尺寸:
window对象有两个用来定义浏览器窗口大小的属性（两个属性均返回以px像素为单位的数值）
浏览器窗口（浏览器视口）不包括工具栏和滚动条。
window.innerHeight属性：返回窗口的文档显示区的高度
浏览器窗口的视口（viewport）高度（CSS布局占据的浏览器窗口的高度），如属性只读，，且没有默认值

var intViewportHeight = window.innerHeight;

window.innerWidth属性：返回窗口的文档显示区的宽度
浏览器视口（viewport）宽度（单位：像素），属性只读，，且没有默认值
*全屏状态下，不同的浏览器因为布局不一样，也会返回不同的innerHeight和innerWidth
兼容所有浏览器写法

var intViewportWidth = window.innerWidth;
<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;

var x = document.getElementById("demo");
x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script>

Window pageXOffset 和 pageYOffset 属性
pageXOffset属性： 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset属性：设置或返回当前页面相对于窗口显示区左上角的 Y 位置。（pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。这些属性是只读的。）
window.scrollBy(100, 100);

if (window.pageXOffset !== undefined) {  // 所有浏览器，除了 IE9 及更早版本
    alert("水平滚动: " + window.pageXOffset 
    + ", 垂直滚动: " + window.pageYOffset);
} else {   // IE9 及更早版本
    alert("水平滚动: " + document.documentElement.scrollLeft 
    + ", 垂直滚动: " + document.documentElement.scrollTop);
}

screenLeft screenTop:只读整数。声明了窗口的左上角在屏幕上 的 X 坐标和 Y 的坐标。IE、Safari、Chrome 和 Opera
screenX:　　　支持 screenLeft 和 screenTop，而Chrome、Firefox 和 Safari 支持 screenX 和 screenY

<div id="box"></div>
<script>
	document.getElementById("box").onclick = function(e){
		console.log("相对于屏幕的"+e.screenX,e.screenY)
		console.log("相对于文档显示区" + e.clientX,e.clientY)
		console.log("相对于当前元素的" + e.offsetX,e.offsetY)
	}
</script>

Window 对象的常用方法：

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。
警告框
如果要确保信息传递给用户，通常会使用警告框。
当警告框弹出时，用户将需要单击“确定”来继续。
window.alert() 方法可以不带 window 前缀来写。

alert("我是一个警告框！");

确认框
如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法：

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

提示框
如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

语法：

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

JavaScript 可以在时间间隔内执行。
这就是所谓的定时事件（ Timing Events）。
window对象运行执行特定的计时事件，通过 JavaScript 使用的有两个关键的方法：
setTimeout
setTimeout即隔一定时间后将事件加入到异步队列中
取消事件使用clearTimeout
setTimeout(fn, 毫秒数) 延时执行

setInterval
即每隔一个间隔时间将事件加入到异步队列
取消该事件使用clearInterval
setInterval(fn, 毫秒数) 循环执行

其他 Window 方法一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸