一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

网页多标签页之间的通讯

题目: 网页多标签之间如何通讯？

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

1. webSocket

通过 webSocket 多页面通讯，无跨域限制。
需要服务端支持，成本比较高

2. localStorage

同域的两个页面，可以通过 localStorage 通讯。

A 页面可以监听到 B 页面的数据变化。

// list 页面
window.addEventListener('storage', event => {
    console.log('key', event.key)
    console.log('newValue', event.newValue)
})

// detail 页面
localStorage.setItem('changeInfo', 'xxx')

3. SharedWorker

Javascript 是单线程的，而且和页面渲染线程互斥。所以，一些计算量大的操作会影响页面渲染。

WebWorker 可以 new Worker('xxx.js') 用来进行 JS 计算，并通过 postMessage 和 onmessage 和网页通讯。
但这个 worker 是当前页面专有的，不得多个页面、iframe 共享。

PS：WebWorker 专用于 JS 计算，不支持 DOM 操作。

SharedWorker 可以被同域的多个页面共享使用，也可以用于通讯。

SharedWorker worker.js

// worker.js
const set = new Set()

onconnect = event => {
    const port = event.ports[0]
    set.add(port)

    // 接收信息
    port.onmessage = e => {
        // 广播消息
        set.forEach(p => {
            if (p === port) return
            p.postMessage(e.data)
        })
    }

    // 发送信息
    port.postMessage('worker.js done')
}

源码参考下方

msg-sharedWork-list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>msg-sharedWork-list.html</title>
</head>
<body>
    <p>SharedWorker message - list page</p>

    <script>
        const worker = new SharedWorker('./worker.js')
        worker.port.onmessage = e => console.info('list', e.data)
    </script>
</body>
</html>

msg-sharedWork-detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>msg-sharedWork-detail.html </title>
</head>
<body>
    <p>SharedWorker message - detail page</p>
    <button id="btn1">修改标题</button>

    <script>
        const worker = new SharedWorker('./worker.js')

        const btn1 = document.getElementById('btn1')
        btn1.addEventListener('click', () => {
            console.log('clicked')
            worker.port.postMessage('detail go...')
        })
    </script>
</body>
</html>

注意，worker 中的日志需要 chrome://inspect 中打开控制台查看。

PS：注意浏览器兼容性，不支持 IE11

答案

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

连环问：iframe 通讯

除了上述几个方法，iframe 通讯最常用 window.postMessage ，支持跨域。

通过 window.postMessage 发送消息。注意第二个参数，可以限制域名，如发送敏感信息，要限制域名。

// 父页面向 iframe 发送消息
window.iframe1.contentWindow.postMessage('hello', '*')

// iframe 向父页面发送消息
window.parent.postMessage('world', '*')

可监听 message 来接收消息。可使用 event.origin 来判断信息来源是否合法，可选择不接受。

window.addEventListener('message', event => {
    console.log('origin', event.origin) // 通过 origin 判断是否来源合法
    console.log('child received', event.data)
})

前端广度——网页多标签之间如何通讯？