如何实现网页多标签tab通讯？

是洋柿子啊
272 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

网页多标签页之间的通讯

例如打开两个 chrome 标签，一个访问列表页，一个访问详情页。在详情页修改了标题，列表页也要同步过来。

这是我们在平常开发中偶尔也会遇到的一个问题，那我们有什么方法可以进行及时的通讯呢？

1.使用webSocket进行通讯

之前我们也有提过 webSocket，他可以多页面通讯，无跨域限制；但是有一点：需要服务端的支持，那么开发成本随之而来，提高了许多。

2.提过localStorage进行通讯

localStorage我们并不模陌生，使用localStorage进行通讯，可以让同域的两个页面（A、B）进行通讯。 就比如 A页面设置了localStorage，B页面就可以监听到localStorage的变化

代码演示：

页面A：

<body>
    <p>localStorage message - detail page</p>

    <button id="btn1">修改标题</button>

    <script>
        const btn1 = document.getElementById('btn1')
        btn1.addEventListener('click', () => {
            const newInfo = {
                id: 100,
                name: '标题' + Date.now()
            }
            localStorage.setItem('changeInfo', JSON.stringify(newInfo))
        })

        // localStorage 跨域不共享
    </script>
</body>

页面B：

<body>
    <p>localStorage message - list page</p>

    <script>
        window.addEventListener('storage', event => {
            console.info('key', event.key)
            console.info('value', event.newValue)
        })
    </script>
</body>

实际效果

image.png

ps: localStorage 是跨域不共享的！
同源的定义

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：

URL结果原因
http://store.company.com/dir2/other.html同源只有路径不同
http://store.company.com/dir/inner/another.html同源只有路径不同
https://store.company.com/secure.html失败协议不同
http://store.company.com:81/dir/etc.html失败端口不同 ( http:// 默认端口是 80)
http://news.company.com/dir/other.html失败主机不同

3. 使用 SharedWorker 进行通讯

  • SharedWorker 是 WebWorker 的一种
  • WebWorker 可以开启子进程执行 js， 但是不能操作Dom
  • SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域。
  • SharedWorker 可单独开启一个进程，用于同域页面通讯

ps：如果有兴趣的话可以看看阮一峰老师的文章（www.ruanyifeng.com/blog/2018/0…

总结

  • webSocket 需要服务端参与，但不限制跨域
  • localStorage 简单易用
  • SharedWorker 本地调试不太方便，考虑浏览器兼容性
avatar
文章
阅读
粉丝