BOM 的那些事儿

前端

2023-10-26 16:30:35

浏览器对象模型（BOM）是 JavaScript 应用程序与浏览器交互的一个重要媒介。本文将带领你深入了解 BOM 的基本知识，从它与 DOM 的区别到其常见对象，再到一些高级技巧。

BOM 与 DOM

BOM 和 DOM 是浏览器中的两个不同但相互关联的对象模型。DOM 主要用于与网页内容进行交互，而 BOM 主要用于与浏览器本身进行交互。

BOM 中的常见对象

window 对象代表浏览器窗口，它提供了许多有用的方法，如 alert()、confirm() 和 open()。

history 对象允许你管理浏览器历史记录，如 back()、forward() 和 go()。

navigator 对象提供有关浏览器和用户的信息，如 userAgent、platform 和 language。

location 对象代表当前 URL，它提供方法来获取和设置协议、主机名、路径和查询字符串。

实用技巧

顺道给你补习一下这两个正则表达式的用法

/^\s$/:* 匹配空字符串或仅由空白字符组成的字符串。
/[\w.-]+@[\w.-]+.\w{2,4}/: 匹配电子邮件地址。

location 的高级用法

使用 assign() 方法修改 URL

location.assign("https://example.com");

使用 replace() 方法修改 URL 并替换历史记录中的当前项

location.replace("https://example.com");

监听 hashchange 事件

window.addEventListener("hashchange", function() {
  // 当 URL 中的哈希更改时执行此函数
});

使用 postMessage() 方法与其他窗口通信

// 在第一个窗口中
window.postMessage("你好，世界！", "https://example.com");

// 在第二个窗口中
window.addEventListener("message", function(event) {
  if (event.origin === "https://example.com") {
    alert(event.data); // 显示 "你好，世界！"
  }
});