site infoHacknerd | Tech Blog
blog cover

🎗️ [JavaScript高级程序设计]12 BOM

JavaScript
浏览器对象模型(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)框架都必须通过服务器或客户端的某些配置解决这个问题。
  • Contents

    • window对象
    • location
    • navigator
    • screen
    • history

    2024/03/29 02:10