BOM 是个什么玩意！
1.1 概述
1.1.1 什么是 BOM
BOM(Browser Object Model 即：浏览器对象模型)，描述与浏览器进行交互的方法和接口。
1.1.2 BOM 的组成
Window：窗口对象，代表整个浏览器窗口，是顶级的对象
Navigator：浏览器对象，代表浏览器当前的信息
Screen：显示器屏幕对象，代表用户的屏幕信息
History：历史记录对象，代表浏览器的历史信息
Location：地址栏对象，代表浏览器当前的地址信息
1.2 Windows 对象
所有浏览器都支持 window 对象，它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性；全局函数是 window 对象的方法；甚至 HTML DOM 的 document 也是 window 对象的属性之一。
1.2.1 常用方法
Window对象不需要创建可以直接使用，Window的方法可以直接使用。
方法 | 描述 |
|---|---|
alert( ) | 弹出警告框 |
prompt( ) | 弹出可输入对话框 |
confirm( ) | 弹出确认框 |
colse( ) | 关闭当前窗口 |
open(URL) | 打开新窗口 |
setTimeout(“JS 代码”，time) | 一次性倒计时 |
clearTimeout(id) | 取消 id 所代表的一次性倒计时 |
setInterval(“JS 代码”，time) | 循环倒计时 |
clearInterval(id) | 取消 id 所代表的循环性倒计时 |
1.2.2 属性
属性 | 描述 |
|---|---|
Navigator | 浏览器对象 |
Screen | 显示器屏幕对象 |
History | 历史记录对象 |
Location | 地址栏对象 |
document | 获取 DOM 对象 |
1.2.3 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("弹出框");
prompt("输入");
confirm("可以确认");
</script>
</body>
</html>
1.3 History 对象
为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制，只能拿到当前的浏览记录，不能拿到所有的历史记录
1.3.1 常用方法
方法 | 描述 |
|---|---|
back() | 加载历史记录中的前一个网页 |
forward() | 加载历史记录中的后一个网页 |
go(param) | 加载历史记录中的一个网页， 正数前进，负数后退 |
1.3.2 属性
属性 | 描述 |
|---|---|
length | history 中的记录个数 |
1.3.3 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("history 中的记录个数: " + window.history.length)
</script>
</body>
</html>
1.4 Location 对象
代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息。
1.4.1 常用方法
方法 | 描述 |
|---|---|
reload() | 刷新网页 |
assign(URL) | 跳转到指定的 URL，当前页面会转为新页面内容，可以点击后退返回上一个页面 |
replace(URL) | 通过加载 URL 替换当前窗口页面，前后两个页面共用一个窗口，不能后退返回上一页 |
1.4.2 属性
属性 | 描述 |
|---|---|
hostname | 返回 web 主机的域名 |
pathname | 返回当前页面的路径和文件名 |
port | 返回 web 主机的端口(80 或 443) |
protocol | 返回所使用的 web 协议(http 或 https) |
href | 获取/设置地址 |
1.4.3 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert(location.href)
</script>
</body>
</html>
1.5 Navigator 对象
代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器。
1.5.1 属性
属性 | 描述 |
|---|---|
appCodeName | 浏览器代号 |
appName | 浏览器名称 |
appVersion | 浏览器版本 |
cookieEnabled | 启用Cookies |
platform | 硬件平台 |
userAgent | 用户代理 |
systemLanguage | 用户代理语言 |
1.5.2 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("用户代理: " + navigator.userAgent)
</script>
</body>
</html>
注意 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为： ♞ navigator 数据可被浏览器使用者更改 ♞ 一些浏览器对测试站点会识别错误 ♞ 浏览器无法报告晚于浏览器发布的新操作系统
1.6 Screen 对象
用户的屏幕信息
1.6.1 属性
属性 | 描述 |
|---|---|
availWidth | 可用的屏幕宽度 |
availHeight | 可用的屏幕高度 |
1.6.2 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("屏幕宽度: " + screen.availWidth + "\n屏幕高度: " + screen.availHeight)
</script>
</body>
</html>