BOM概述
目录
什么是BOM
浏览器对象模型（Browser Object Model (BOM)）
Window对象
一些常用方法
JavaScript Window Screen
Window Screen
Window Screen 高度
Window Screen 可用宽度
Window Screen 可用高度
Window Screen 色深
Window Screen 像素深度
JavaScript Window Location
Window Location Href
Window Location 主机名
Window Location 路径名
Window Location 协议
Window Location 端口
Window Location Assign
JavaScript Window History
Window History
Window History Back
Window History Forward
浏览器 Cookie
浏览器应用程序名称
浏览器应用程序代码名称
浏览器引擎
JavaScript 弹出框
警告框
语法
确认框
语法
提示框
语法
JavaScript Timing 事件
Timing 事件
setTimeout() 方法
setInterval() 方法
JavaScript Cookies
Cookie 字符串
什么是BOM
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
浏览器对象模型（Browser Object Model (BOM)）
不存在浏览器对象模型（BOM）的官方标准。
现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。
Window对象
在DOM中最高层的对象是Doucment
但是在BOM中最高的对象是window对象也就是直接面向窗口进行操作
一些常用方法
- window.innerHeight - 浏览器窗口的内高度（以像素计）
- window.innerWidth - 浏览器窗口的内宽度（以像素计）
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
具体使用举例
输出结果：
JavaScript Window Screen
window.screen 对象包含用户屏幕的信息。
Window Screen
window.screen 对象不带 window 前缀也可以写：
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
Window Screen 高度
screen.height 属性返回以像素计的访问者屏幕的高度。
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。
Window Screen 色深
screen.colorDepth 属性返回用于显示一种颜色的比特数。
Window Screen 像素深度
screen.pixelDepth 属性返回屏幕的像素深度。
具体实现
JavaScript Window Location
window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。
Window Location Href
window.location.href 属性返回当前页面的 URL。
Window Location 主机名
window.location.hostname 属性返回（当前页面的）因特网主机的名称。
Window Location 路径名
window.location.pathname 属性返回当前页面的路径名。
Window Location 协议
window.location.protocol 属性返回页面的 web 协议。
Window Location 端口
window.location.port 属性返回（当前页面的）互联网主机端口的编号。
Window Location Assign
window.location.assign() 方法加载新文档。
具体例子实现
window.location 对象
JavaScript Window History
Window History
window.history 对象可不带 window 书写。
为了保护用户的隐私，JavaScript 访问此对象存在限制。
Window History Back
history.back() 方法加载历史列表中前一个 URL。
这等同于在浏览器中点击后退按钮。
Window History Forward
history forward() 方法加载历史列表中下一个 URL。
这等同于在浏览器中点击前进按钮。
输出结果
JavaScript Window Navigator
window.navigator 对象包含有关访问者的信息。
浏览器 Cookie
cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false
浏览器应用程序名称
appName 属性返回浏览器的应用程序名称
浏览器应用程序代码名称
appCodeName 属性返回浏览器的应用程序代码名称
浏览器引擎
product 属性返回浏览器引擎的产品名称
JavaScript 弹出框
警告框
如果要确保信息传递给用户，通常会使用警告框。
当警告框弹出时，用户将需要单击“确定”来继续。
语法
window.alert("sometext");
确认框
如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法
window.confirm("sometext");
提示框
如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
语法
window.prompt("sometext","defaultText");
JavaScript Timing 事件
Timing 事件
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
setTimeout() 方法
window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
setInterval() 方法
setInterval() 方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval() 方法可以不带 window 前缀来写。
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
本例每秒执行一次函数 "myTimer"（就像数字手表）。
此页面上的脚本启动这个时钟：
加入一个停止摁钮
此页面上的脚本启动这个时钟：
JavaScript Cookies
Cookie 让您在网页中存储用户信息。
什么是 cookie？
Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的：
- 当用户访问网页时，他的名字可以存储在 cookie 中。
- 下次用户访问该页面时，cookie 会“记住”他的名字。
Cookie 保存在名称值对中，如：
username = Bill Gates
当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。
通过 JavaScript 创建 cookie
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
通过 JavaScript，可以这样创建 cookie：
document.cookie = "username=Bill Gates";
您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
通过 JavaScript 读取 cookie
通过 JavaScript，可以这样读取 cookie：
var x = document.cookie;
document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;
通过 JavaScript 改变 cookie
通过使用 JavaScript，你可以像你创建 cookie 一样改变它：
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
旧 cookie 被覆盖。
通过 JavaScript 删除 cookie
删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值：
直接把 expires 参数设置为过去的日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。
Cookie 字符串
document.cookie 属性看起来像一个正常的文本字符串。但它不是。
即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。
如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：
cookie1 = value; cookie2 = value;
显示所有 cookie 创建 Cookie 1 创建 Cookie 2 删除 Cookie 1 删除 Cookie 2
如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。