浏览器对象模型(BOM,Browser Object Model)
window对象
BOM 的核心是 window 对象,表示浏览器的实例。window 对象在浏览器中有两重身份,一个是ECMAScript 中的 Global 对象,另一个就是浏览器窗口的 JavaScript 接口
1.Global作用域2.窗口关系3.窗口位置与像素比4.窗口大小5.视口位置6.导航与打开新窗口7.定时器8.系统对话框
location
location 是最有用的 BOM 对象之一,提供了当前窗口中加载文档的信息,以及通常的导航功能
1.查询字符串2.操作地址navigator
navigator 是由 Netscape Navigator 2 最早引入浏览器的,现在已经成为客户端标识浏览器的标准。
1.检测插件2.注册处理程序screen
history
history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性,所以每个 window 都有自己的 history 对象。出于安全考虑,这个对象不会暴露用户访问过的 URL,但可以通过它在不知道实际 URL 的情况下前进和后退。
1.导航2.状态管理 用户每次点击都会触发页面刷新的时代早已过去,“后退”和“前进”按钮对用户来说就代表“帮我切换一个状态”的历史也就随之结束了。为解决这个问题,首先出现的是 hashchange 事件。HTML5 也为history 对象增加了方便的状态管理特性。
hashchange 会在页面 URL 的散列变化时被触发,开发者可以在此时执行某些操作而状态管理API 则可以让开发者改变浏览器 URL 而不会加载新页面。可以使用 history.pushState() 。这个方法接收 3 个参数:一个 state 对象、一个新状态的标题和一个(可选的)相对 URL。pushState()会创建新的历史记录,所以也会相应地启用“后退”按钮。此时单击“后退”按钮,就会触发 window 对象上的 popstate 事件。popstate 事件的事件对象有一个 state 属性,其中包含通过 pushState()第一个参数传入的 state 对象。state 对象应该只包含可以被序列化的信息。因此,DOM 元素之类并不适合放到状态对象里保存。 replaceState()方法只会覆盖当前记录不会创建新的历史记录。注意⚠️:使用 HTML5 状态管理时,要确保通过 pushState()创建的每个“假”URL 背后都对应着服务器上一个真实的物理 URL。否则,单击“刷新”按钮会导致 404 错误。所有单页应用程序(SPA,Single Page Application)框架都必须通过服务器或客户端的某些配置解决这个问题。