什么是BOM?
BOM是一套操作HTML标签的API(接口/方法/属性)、同时还可以交互CSS的标签
页面交互功能:浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
BOM是由一系列相关对象构成,每个对象都提供了很多方法和属性。
常见的BOM对象:
- window:代表整个浏览器窗口(window是BOM中的一个对象,并且是顶级的对象)
- Navigator :代表浏览器当前的信息,通过Navigator我们可以获取用户当前使用的是什么浏览器
- Location: 代表浏览器当前的地址信息,通过Location我们可以获取或者设置当前的地址信息
- History:代表浏览器的历史信息,通过History我们可以实现上一步/刷新/下一步操作(出于
- Screen:代表用户的屏幕信息,属于硬件信息
特别强调几点:
- screen 是整个电脑唯一的
- navigator 是整个浏览器唯一的,如果有多个浏览器就会有多个 navigator
- window 是每个网页唯一的,每个网页都有一个独立的 window
- history,location 是每个网页的信息,当然也是网页唯一的
window:
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
location:
window.location.href; //获取当前地址栏的地址
window.location.href = “http://www.baidu.com”; // 设置当前地址栏的地址
window.location.reload(); //刷新
window.location.reload(true); //强制刷新
Window.Location Pathname 返回 URL 的路径名。
Window.Location Assign 加载新的文档。
Window.location.hostname 返回 web 主机的 域名
Window.location.port 返回 web 主机的端口 (80 或 443)
Window.location.protocol 返回所使用的 web 协议(http:// 或 https://)
Window.location.search 返回地址的参数
Navigator
表示用户代理的状态和标识,也就是浏览器基本信息,在这里面我们需要了解一个属性 — userAgent,代表当前浏览器的用户代理。
调用对象的属性,不需要使用 ()
navigator.appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回 OS 使用的默认语言。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回 OS 的自然语言设置。
History
可以通过History来实现刷新、上一步、下一步
window.history.forword(); //上一步
window.history.back(); //下一步
window.history.go(0); //接收参数 0 表示刷新当前页面
window.history.go(2); //接收正整数 表示前进2个页面
window.history.go(-2); //接收负整数 表示后退2个页面