使用JavaScript实现跨标签页通信，建议收藏备用！

Web 开发中，有时我们需要实现不同页面之间的数据传递和事件触发，比如一个页面打开了另一个页面，然后在新的页面中操作后需要更新原来的页面的内容。这种场景在电商、支付、社交等领域都很常见，那么如何用js来实现不同页面之间的交互呢？本文提供几种常见的方法供大家学习参考！

一、localStorage

在 Web Storage 中，每一次将一个值存储到本地存储时，都会触发一个 storage 事件，通过 localStorage 结合 window.addEventListener('storage', cb) 完成 A、B 标签页间通信。

// A标签页
localStorage.setItem('send-msg', JSON.stringify({
    name: 'hzd',
    age: '18',
}))

// B标签页
window.addEventListener('storage', (data) => {
    try {
        console.log(data)
        const msg = JSON.parse(data.newValue)
    } catch (err) {
        // 处理错误
    }
})

在控制台打印一下 data 的值，可以看到挺多信息：

二、BroadcastChannel

BroadcastChannel 通信方式的原理就是一个命名管道，它允许让指定的同源下浏览器不同的窗口来订阅它。

每个 BroadcastChannel 对象都需要使用一个唯一的名称来标识通道，这个名称在同一域名下的不同页面之间必须是唯一的，它允许同一域名下的不同页面之间进行通信。

通过 postMessage 方法，一个页面可以将消息发送到频道中，而其他页面则可以监听 message 事件来接收这些消息。通过这种方式是短线了一种实时通信的机制，可以在不同的页面之间传递信息，实现页面间的即时交流。如下图所示：

// A页面
const bc = new BroadcastChannel("test_channel");
bc.postMessage("This is a test message.");


// B页面
const bc = new BroadcastChannel("test_channel");
bc.onmessage = (event) => {
  console.log(event);
};

三、postMessage

postMessage 是 H5 引入的 API，该方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

下面看两个简单的使用例子：

示例一：

// 发送端：

<button id="btn">发送消息</button>

<script>
  let device = window.open('http://localhost:63342/signal_communication/postMessage/receive.html')

  document.getElementById('btn').addEventListener('click', event => {
    device.postMessage('发送一条消息')
  })
</script>

// 接收端：

<script>
  window.addEventListener('message', event => {
    console.log(event)
  })
</script>

示例二：

// 发送端：

<div>
    <input id="text" type="text" value="Runoob" />
    <button id="sendMessage" >发送消息</button>
</div>
<iframe id="receiver" src="https://c.runoob.com/runoobtest/postMessage_receiver.html" width="300" height="360">
    <p>你的浏览器不支持 iframe。</p>
</iframe>
<script>
window.onload = function() {
    let receiver = document.getElementById('receiver').contentWindow;
    let btn = document.getElementById('sendMessage');
    btn.addEventListener('click', function (e) {
        e.preventDefault();
        let val = document.getElementById('text').value;
        receiver.postMessage("Hello "+val+"！", "https://c.runoob.com");
    });
}
</script>

// 接收端：

<div id="recMessage">Hello World!</div>

<script>
window.onload = function() {
    let messageEle = document.getElementById('recMessage');
    window.addEventListener('message', function (e) {  // 监听 message 事件
        alert(e.origin);
        if (e.origin !== "https://www.runoob.com") {  // 验证消息来源地址
            return;
        }
        messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;
    });
}
</script>

四、SharedWorker

SharedWorker 是一种在 Web 浏览器中使用的 Web API，它允许不同的浏览上下文，如不同的浏览器标签页之间共享数据和执行代码。它可以用于在多个浏览上下文之间建立通信通道，以便它们可以共享信息和协同工作。

与普通的 Worker 不同，SharedWorker 可以在多个浏览上下文中实例化，而不仅限于一个单独的浏览器标签页或框架。这使得多个浏览上下文可以共享同一个后台线程，从而更有效地共享数据和资源，而不必在每个标签页或框架中都创建一个独立的工作线程。

<!-- a.html -->
<script>
  let index = 0;
  const worker = new SharedWorker("worker.js");

  setInterval(() => {
    worker.port.postMessage(`moment ${index++}`);
  }, 1000);
</script>

<!-- b.html -->
<script>
  const worker = new SharedWorker("worker.js");

  worker.port.start();
  setInterval(() => {
    worker.port.postMessage("php是世界上最好的语言");
  }, 1000);

  worker.port.onmessage = function (e) {
    if (e.data) {
      console.log(e.data);
    }
  };
</script>

创建一个 worker.js 文件,并编写以下代码：

let data = "";

self.onconnect = (e) => {
  const port = e.ports[0];

  port.onmessage = function (e) {
    if (e.data === "php是世界上最好的语言") {
      port.postMessage(data);
      data = "";
    } else {
      data = e.data;
    }
  };
};

最终代码运行效果如下图所示：

五、Service Worker

Service Worker 它是一种服务工作线程，是一种在浏览器背后运行的脚本，用于处理网络请求和缓存等任务。它是一种在浏览器与网络之间的中间层，允许开发者拦截和控制页面发出的网络请求，以及管理缓存，从而实现离线访问、性能优化和推送通知等功能。

它在浏览器背后独立运行与网页分开，这意味着即使用户关闭了网页，Service Worker 仍然可以运行。可以用于实现推送通知功能。它可以注册为推送消息的接收者，当服务器有新的通知要发送时，Service Worker 可以显示通知给用户，即使网页没有打开。

要想使用，首先我们创建两个不同的 html 文件分别代表不同的页面，创建一个 Service Worker 文件，并且使用 live server 开启一个本地服务器：

<!-- a.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      navigator.serviceWorker.register("worker.js").then(() => {
        console.log("注册成功");
      });

      setInterval(() => {
        navigator.serviceWorker.controller.postMessage({
          value: `moment ${new Date()}`,
        });
      }, 3000);

      navigator.serviceWorker.onmessage = function (e) {
        console.log(e.data.value);
      };
    </script>
  </body>
</html>

<!-- b.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      navigator.serviceWorker.register("worker.js").then(() => {
        console.log("注册成功");
      });

      setInterval(() => {
        navigator.serviceWorker.controller.postMessage({
          value: `moment ${new Date()}`,
        });
      }, 3000);

      navigator.serviceWorker.onmessage = function (e) {
        console.log(e.data.value);
      };
    </script>
  </body>
</html>

创建一个 worker.js 文件并编写以下代码：

// worker.js
self.addEventListener("message", function (e) {
  e.waitUntil(
    self.clients.matchAll().then(function (clients) {
      if (!clients || clients.length === 0) {
        return;
      }
      clients.forEach(function (client) {
        client.postMessage(e.data);
      });
    })
  );
});

最终代码运行如下图所示：

你所编写的 Service Worker 将遵守以下生命周期：

注册: 在网页的 JavaScript 代码中调用 navigator.serviceWorker.register() 方法来注册一个 Service Worker
安装: 当 Service Worker 文件被下载并首次运行时，会触发 install 事件。在 install 事件中，你可以缓存静态资源，如 HTML、CSS、JavaScript 文件，以便在离线时使用
激活: 安装成功后，Service Worker 并不会立即接管页面的网络请求。它需要等到之前的所有页面都关闭，或者在下次页面加载时才会激活()
就是因为编写的 worker 代码不生效,一直刷新都不生效,直到我关机重启了才生效的......
控制: 一旦 Service Worker 被激活，它就开始控制在其作用域内的页面。它可以拦截页面发出的网络请求，并根据缓存策略返回缓存的内容
更新: 当你更新 Service Worker 文件并再次注册时，会触发一个新的 install 事件。你可以在新的 install 事件中更新缓存，然后在下次页面加载时进行激活，以确保新的 Service Worker 被使用
解除注册: 如果你不再需要，可以通过调用 navigator.serviceWorker.unregister() 来解除注册

六、IndexDB

IndexedDB 是一种在浏览器中用于存储和管理大量结构化数据的 Web API。它提供了一种持久性存储解决方案，允许 Web 应用程序在客户端存储数据，以便在不同会话、页面加载或浏览器关闭之间保留数据。

与传统的 cookie 或 localStorage 等存储方式不同，IndexedDB 更适合存储复杂的、结构化的数据，例如对象、数组、键值对等。这使得它特别适用于应用程序需要存储大量数据、执行高级查询或支持离线工作的情况。

要实现跨标签通信，如下代码所示:

<!-- a.html -->
<script>
  let index = 0;
  // 打开或创建 IndexedDB 数据库
  const request = indexedDB.open("database", 1);

  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    const objectStore = db.createObjectStore("dataStore", {
      keyPath: "key",
    });
  };

  request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction(["dataStore"], "readwrite");
    const objectStore = transaction.objectStore("dataStore");

    // 存储数据

    objectStore.put({ key: "supper", value: `moment` });

    transaction.oncomplete = () => {
      db.close();
    };
  };
</script>

<!-- b.html -->
<script>
  // 打开相同的 IndexedDB 数据库
  const request = indexedDB.open("database", 1);

  request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction(["dataStore"], "readonly");
    const objectStore = transaction.objectStore("dataStore");

    // 获取数据
    const getRequest = objectStore.get("supper");

    getRequest.onsuccess = (event) => {
      const data = event.target.result;
      if (data) {
        console.log(data.value);
      }
    };

    transaction.oncomplete = () => {
      db.close();
    };
  };
</script>

最终代码运行如下图所示：

七、cookie

<!-- a.html -->
<script>
  let index = 0;
  setInterval(() => {
    document.cookie = `supper=moment ${index++}`;
  }, 1000);
</script>

<!-- b.html -->
<script>
  console.log("cookie 的值为: ", document.cookie);

  setInterval(() => {
    console.log("cookie 的值发生了变化: ", document.cookie);
  }, 1000);
</script>

具体代码运行效果如下图所示：

作者：前端掘金者H
链接：https://juejin.cn/post/7268602250653319202

几天做一个web项目有这样一个需求，web项目是一个后台管理系统，在使用系统时会打开很多标签页，每个标签页就是一个iframe打开的一个新的html页面，现在需要在每个标签页之间互相通信、互相调用方法。例如：打开了A,B,C三个标签页，我在C页面把数据修改了，我要通知A,B两个页面的数据也要更新到最新修改的数据。

在网上看到的解决办法都是用iframe 父页面与子页面互相调用方法，但是用这种方法感觉一点都不灵活，不是很好用，有很大的局限性。

后来在使用localStorage存储的时候发现localStorage有这样一个特性。

在A界面监听storage事件。

window.addEventListener("storage", function (e) {

alert(e.key+'='+e.newValue);

});

在B页面修改或添加了localStorage。

localStorage.setItem('key', 'value');

然后A界面的监听事件里就可以接收到通知。

利用这个特性我封装了一个JS，代码如下：

用法很简单，在所有页面都引入上面的JS，然后在A,B页面添加监听事件。

C页面对数据进行了修改后就发一个通知给A,B页面，让A,B页面进行相应的操作。

就这样一个多页面之间互相通信调用的JS就封装好了，iframe与iframe之间的页面可以互相通信调用。浏览器每个标签页之间的页面也可以互相通信调用。

不过需要注意以下几点：

1、互相通信调用之间的几个页面要放在服务器环境，例如放在IIS或者tomcat之类的服务容器里。

2、打开的几个页面要是同源页面，也就是几个页面之间IP相同，端口相同。

3、打开的几个页面必须是在同一个浏览器。

4、发送通知传的参数现在还只能是字符串，如果要传JSON类型，请先在C页面转字符串，在A,B接收到通知后，再把字符串转回JSON。

5、同一个页面接收不到同一个页面发送的通知，当然谁也不会做这种事，在同一个页面接收同一个页面发送的通知。

ultrin是一个多窗口管理工具。软件基于Electron和React等开发的多标签页管理软件，使用它之后帮助用户将各个不同程序的窗口整合在一个窗口中，帮助你高效的整理杂乱的桌面。软件使用类似一个打开了多个标签页的浏览器，它将各个不同的程序都放置在一个单独的标签页，这样用户可以像切换网页一样，快速切换各个程序窗口。软件使用方便，可以快速切换每个程序，让办公更加高效。软件提供多种切换模式，你可以用鼠标点击标签来切换，也可以使用Ctrl+Tab与Ctrl+Shift+Tab键盘快捷键来切换，十分便捷。

下载地址：https://www.downkuai.com/soft/118112.html

Multrin使用方法

1、运行Multrin绿色版后会提示你拖放窗口进去，你需要将窗口拖放到软件界面接近顶部位置，看到软件界面顶部出现标签页了就可以松开鼠标了。如此反复操作，你就可以将多个窗口放置到同一个窗口中了。这里支持包括UWP、Windows窗口空间以及其他第三方的窗口界面添加。
2、添加窗口时无法调整标签的位置，但添加后你就可以拖动标签来进行位置调整了。窗口大小方面，你可以调整软件内软件窗口大小(不是软件窗口大小)，而软件窗口大小会根据你调节标签页软件的大小而变化。

3、软件同样也支持快捷键，使用「Ctrl+Tab」可以快速在标签页中进行切换。当关闭软件窗口时，会保留当前你正在浏览的标签页窗口，其他的标签页窗口都会被关闭掉。最后在右上角还支持亮色和暗色主题的切换。

软件特点

1、Multrin 可以支持添加包括 UWP 和传统的 Windows 窗口，甚至大部分第三方自制界面的应用比如 TIM 等也能顺利添加；
2、将应用程序添加到 Multrin 的多标签页组之后，你可以使用鼠标拖动标签页来调整位置排序；
3、在调整软件窗口大小后，Multrin 也会自动根据大小自动适应变化的；
4、你可以随时将新的应用程序窗口拖进来 Multrin 里，也能将当前的程序拖出去；
5、你将软件所在的标签页关闭的同时也会关闭程序；
6、当你关闭整个 Multrin 时，它会保留当前你正在浏览的标签页的程序，其他的标签页对应的软件则会全部一次性关掉。

软件功能

1、在Multrin上拖放应用程序并在单个窗口中进行管理
此应用程序背后的主要工作原理是选项卡式界面，类似于经典的Internet浏览器之一。用户所需要做的就是将他们的应用程序叠加到界面上，然后将其保留在其中，并嵌套在组织整齐的标签中。
但是，拖放过程存在一个陷阱，那就是需要将应用程序从其标题栏中拖动的事实，因为不支持直接从任务栏中获取这些应用程序。尽管如此，这并不是一个重大的交易突破点，但它确实是该应用程序功能的不错的补充。
2、一个选项卡式布局，可以重新定位，但缺乏双视角
将应用程序添加到浏览界面后，即可在相应的选项卡中使用它们，这些选项卡通过选项卡的标题栏样式可提供其内容的轻微预览。但是，在鼠标悬停时具有“偷看”类型的预览将是有益的补充。
另外，由于这是一个应用程序组织软件，因此一个很快变得很明显的缺点是缺乏堆叠标签和应用程序本身的能力。水平或垂直；没有双景。对于要求更高的用户而言，这可能是个问题。
3、Windows选项卡浏览功能的一个有趣替代方法，它将提高用户的工作效率
该软件将允许人们使用选项卡式界面来管理他们的应用程序，该界面将使所有事物保持井井有条。尽管它为打开的应用程序设法提供了比内置Windows选项卡浏览更好的替代方法，但是由于缺少双视图和更好的选项卡预览，因此可靠性较低。

在线咨询

上一篇：html网页源代码模板大全
下一篇：什么是HTML5?

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商