巧用事件侦听，跨页通信无烦恼

前端

2023-10-28 23:55:02

跨页面通信：在浏览器中让网页互动

在现代网络世界中，网站不再是孤立的存在。它们经常需要与其他页面交互，共享数据并执行各种任务。在本文中，我们将探讨跨页面通信的奥秘，重点关注当一个页面从另一个页面打开时的情况。

事件侦听：网页之间的桥梁

当一个页面（A 页面）从另一个页面（B 页面）打开时，它们实际上是两个独立的窗口。为了让它们能够沟通，我们需要使用事件侦听。事件侦听允许一个页面监听另一个页面的事件，并在事件发生时执行相应的操作。

页面关闭事件：优雅地告别

对于 B 页面正常关闭的情况，我们可以使用 window.onbeforeunload 事件。该事件会在 B 页面关闭之前触发，我们可以在这个事件中向 A 页面发送一条消息，通知 A 页面 B 页面即将关闭。

页面意外崩溃：处理意外

然而，事情并不总是按计划进行。如果 B 页面意外崩溃，我们如何通知 A 页面呢？这就是 try...catch 语句派上用场的地方。当 B 页面发生错误时，try 块中的代码会捕获错误并执行 catch 块中的代码。在 catch 块中，我们可以向 A 页面发送一条消息，通知 A 页面 B 页面已意外崩溃。

代码示例：让页面对话

A 页面代码：

<script>
  // 打开 B 页面
  const BPage = window.open("B.html");

  // 监听 B 页面关闭事件
  window.addEventListener("beforeunload", (event) => {
    // 向 B 页面发送消息，通知 B 页面即将关闭
    BPage.postMessage("BPageClosing", "*");
  });

  // 监听 B 页面消息事件
  window.addEventListener("message", (event) => {
    // 判断消息是否来自 B 页面
    if (event.origin !== "http://example.com") {
      return;
    }

    // 获取消息内容
    const message = event.data;

    // 根据消息内容执行相应的操作
    if (message === "BPageClosing") {
      // B 页面即将关闭
      alert("B 页面即将关闭");
    } else if (message === "BPageCrashed") {
      // B 页面意外崩溃
      alert("B 页面意外崩溃");
    }
  });
</script>

B 页面代码：

<script>
  // 监听页面关闭事件
  window.addEventListener("beforeunload", (event) => {
    // 向 A 页面发送消息，通知 A 页面 B 页面即将关闭
    window.opener.postMessage("BPageClosing", "*");
  });

  // 监听页面错误事件
  window.addEventListener("error", (event) => {
    // 向 A 页面发送消息，通知 A 页面 B 页面意外崩溃
    window.opener.postMessage("BPageCrashed", "*");
  });
</script>