去面试里面有一道陌生的题目，如何实现浏览器内多个标签页之间的通信， 我想问的是什么叫浏览器内多个标签页之间的通信？标签页还有通信的说法吗？
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2242 days ago, the information mentioned may be changed or developed.
 |
ysc3839Sep 24, 2020 via Android
1
就是同一网站不同页面之间的通信。
|
 |
mxT52CRuqR6o5Sep 24, 2020 via Android
2
你用 window.open 打开一个页面会返回个对象，你能通过这个对象进行页面间通信，打开同源页面直接返回新开页面的 window 对象，可以对被打开页面随意控制，打开非同源页面通过返回对象上的 postMessage 通信
|
|
mxT52CRuqR6o5Sep 24, 2020
3
还可以通过 BroadcastChannel 或监听 localStorage 事件进行同源网站页面之间的通信
|
 |
4
window.postMessage()
比如你同时打开了多个 V 站页面，你想在有未读提醒的时候全部页面都显示未读提醒，在随意一个标签页点开消息之后其他标签页也自动更新到已读状态，最好的办法是标签页之间通信。 |
4
 |
6
@mxT52CRuqR6o5 好模式的 api
|
|
7
@lin07hui 好陌生啊这个 api
|
 |
anUglyDogSep 24, 2020
8
其它标签页监听 storage 事件，本页面 localStorage.setItem 时其它页面可以收到消息。
监听 message 事件，使用 sharedWorker 的 postMessage 可以使别的页面收到消息。 重点：同域。 |
|
9
就算是老浏览器，你也可以通过服务器同步，或者就是在 cookie 里设置数据，setInterval 不断读写 cookie 数据也能多标签页同步数据。
重点：不管技术多烂，你都可以完成目标。 |
 |
xieqiqiang00Sep 24, 2020
10
用 localStorage 吧
|
 |
11
看了楼上所说的，对通信这个词又陌生了……
|
 |
godblessumilkSep 25, 2020 via Android
12
我一般是用 sessionStorage
|
 |
shilianmlxgSep 25, 2020 via iPhone
13
又陌生了起来
|
 |
dfourcSep 25, 2020
14
@BaiLinfeng #7 vue/react 等单页实例也是有这个 api 的实践（我想熟悉的都知道吧），可以说利用这个也可以手写一个小单页应用，可能你还没了解到这部分
|
 |
CurtionSep 25, 2020
15
|
 |
imswingSep 25, 2020 via iPhone
16
@godblessumilk ？ sessionStorage 不能跨 tab
|
|
17
@galikeoy 说到 vue 我就想到的是组件之间通信传值。浏览器多标签通信是真默认，说多网页之间相互通信获取还好理解点。
|
|
18
@Curtion 你写的吗？
|
|
CurtionSep 25, 2020
19
@BaiLinfeng #18 不是
|
 |
ruzztokSep 25, 2020
20
不问原理，问 api 的面试，我都懒得回答
|
|
21
@BaiLinfeng 太多文字了先进我收藏夹吃灰先，看了一点看不下去了
|
Select Language