如何实现浏览器内多个标签页之间的通信，是什么意思？

[BaiLinfeng]

去面试里面有一道陌生的题目，如何实现浏览器内多个标签页之间的通信， 我想问的是什么叫浏览器内多个标签页之间的通信？标签页还有通信的说法吗？

[ysc3839]

就是同一网站不同页面之间的通信。

[mxT52CRuqR6o5]

你用 window.open 打开一个页面会返回个对象，你能通过这个对象进行页面间通信，打开同源页面直接返回新开页面的 window 对象，可以对被打开页面随意控制，打开非同源页面通过返回对象上的 postMessage 通信

[mxT52CRuqR6o5]

还可以通过 BroadcastChannel 或监听 localStorage 事件进行同源网站页面之间的通信

[eason1874]

window.postMessage()

比如你同时打开了多个 V 站页面，你想在有未读提醒的时候全部页面都显示未读提醒，在随意一个标签页点开消息之后其他标签页也自动更新到已读状态，最好的办法是标签页之间通信。

[lin07hui]

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

[BaiLinfeng]

@mxT52CRuqR6o5 好模式的 api

[BaiLinfeng]

@lin07hui 好陌生啊这个 api

[anUglyDog]

其它标签页监听 storage 事件，本页面 localStorage.setItem 时其它页面可以收到消息。
监听 message 事件，使用 sharedWorker 的 postMessage 可以使别的页面收到消息。
重点：同域。

[anUglyDog]

就算是老浏览器，你也可以通过服务器同步，或者就是在 cookie 里设置数据，setInterval 不断读写 cookie 数据也能多标签页同步数据。
重点：不管技术多烂，你都可以完成目标。

[xieqiqiang00]

用 localStorage 吧

[yeqizhang]

看了楼上所说的，对通信这个词又陌生了……

[godblessumilk]

我一般是用 sessionStorage

[shilianmlxg]

又陌生了起来

[galikeoy]

@BaiLinfeng #7 vue/react 等单页实例也是有这个 api 的实践（我想熟悉的都知道吧），可以说利用这个也可以手写一个小单页应用，可能你还没了解到这部分

[Curtion]

你需要看这个 https://zh.javascript.info/cross-window-communication

[imswing]

@godblessumilk ？ sessionStorage 不能跨 tab

[BaiLinfeng]

@galikeoy 说到 vue 我就想到的是组件之间通信传值。浏览器多标签通信是真默认，说多网页之间相互通信获取还好理解点。

[BaiLinfeng]

@Curtion 你写的吗？

[Curtion]

@BaiLinfeng #18 不是

[ruzztok]

不问原理，问 api 的面试，我都懒得回答