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>
扫描二维码关注公众号,回复:
11390033 查看本文章
注意
来自 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>