- DOM - Document Object Model
- BOM - Browser Object Model
- BOM提供了独立于内容而与浏览器窗口进行交互的对象
- 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
- 浏览器窗口交互的一些对象,例如可以移动,调整浏览器大小的window对象,可以用于导航的location对象与history对象,可以获取浏览器,操作系统与用户屏幕信息的navigator与screen对象,可以使用document作为访问HTML文档的入口,管理框架的frames对象等
-
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象
-
window对象
- BOM的核心对象是window。
- 在浏览器中window有双重角色:JS访问浏览器窗口的一个接口,ECMAScript规定的Global对象。
- moveTo(),moveBy(),resizeTo(),resizeBy()这些基本都被浏览器禁用了。
- 获取窗口大小,不同浏览器不同实现
- 导航和打开窗口,window.open()。
- 超时调用、间歇调用:setTimeout(function,time);setInterval(function,time);
在开发环境下,很少真正的使用间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。所以用到间歇调用时都是使用超时调用间接实现。 - 系统对话框:alert(),confirm(),prompt()
-
location对象
- location是最有用的BOM对象之一
- 提供了与当前窗口中加载的文档有关的信息,还提供了导航功能
- location对象的特别:既是window的属性,又是document的属性,所以window.location == document.location
- 解析URL部分,location.hash,location.host,location.search等
- 位置操作:
location.assign("http://www.baidu.com"); //跳转到参数页面,同时添加浏览记录
location.href = "http://www.baidu.com";
window.location = "http://www.baidu.com";也能达到同样的效果,因为这两个的结果是调用assign()方法。 - 注意上面的参数,如果没有http协议部分,就是跳转到当前域下的路径。
- 也可以只修改URL的一部分,例如location.port=8090,每次修改完会自动触发刷新
- location.replace("http://www.baidu.com");使用该方法不会添加历史记录,也就有返回按钮功能
- location.reload();重新加载当前页,无参数是从缓存加载,带参数true强制从服务器重新请求。
-
navigator对象
- 识别客户端浏览器
- 检测插件:navigator.plugins
-
screen对象
- js中几个用处不大的对象之一。
- 屏幕信息
-
history对象
- history.go()
- history.back()
- history.forward()
- history.length