这是一个创建于 1506 天前的主题，其中的信息可能已经有所发展或是发生改变。
去面试里面有一道陌生的题目，如何实现浏览器内多个标签页之间的通信， 我想问的是什么叫浏览器内多个标签页之间的通信？标签页还有通信的说法吗？
 |
1
ysc3839 2020-09-24 20:32:20 +08:00 via Android
就是同一网站不同页面之间的通信。
|
 |
2
mxT52CRuqR6o5 2020-09-24 20:38:06 +08:00 via Android
你用 window.open 打开一个页面会返回个对象，你能通过这个对象进行页面间通信，打开同源页面直接返回新开页面的 window 对象，可以对被打开页面随意控制，打开非同源页面通过返回对象上的 postMessage 通信
|
|
3
mxT52CRuqR6o5 2020-09-24 20:41:29 +08:00
还可以通过 BroadcastChannel 或监听 localStorage 事件进行同源网站页面之间的通信
|
 |
4
eason1874 2020-09-24 20:45:25 +08:00  4
window.postMessage()
比如你同时打开了多个 V 站页面，你想在有未读提醒的时候全部页面都显示未读提醒，在随意一个标签页点开消息之后其他标签页也自动更新到已读状态，最好的办法是标签页之间通信。 |
 |
5
lin07hui 2020-09-24 21:25:22 +08:00
|
 |
6
BaiLinfeng OP @mxT52CRuqR6o5 好模式的 api
|
|
7
BaiLinfeng OP @lin07hui 好陌生啊这个 api
|
 |
8
anUglyDog 2020-09-24 21:57:28 +08:00
其它标签页监听 storage 事件，本页面 localStorage.setItem 时其它页面可以收到消息。
监听 message 事件，使用 sharedWorker 的 postMessage 可以使别的页面收到消息。 重点：同域。 |
|
9
anUglyDog 2020-09-24 21:59:18 +08:00 1
就算是老浏览器，你也可以通过服务器同步，或者就是在 cookie 里设置数据，setInterval 不断读写 cookie 数据也能多标签页同步数据。
重点：不管技术多烂，你都可以完成目标。 |
 |
10
xieqiqiang00 2020-09-24 21:59:28 +08:00
用 localStorage 吧
|
 |
11
yeqizhang 2020-09-24 22:17:24 +08:00 via Android 1
看了楼上所说的，对通信这个词又陌生了……
|
 |
12
godblessumilk 2020-09-25 01:05:01 +08:00 via Android
我一般是用 sessionStorage
|
 |
13
shilianmlxg 2020-09-25 08:46:50 +08:00 via iPhone
又陌生了起来
|
 |
14
galikeoy 2020-09-25 08:58:38 +08:00
@BaiLinfeng #7 vue/react 等单页实例也是有这个 api 的实践（我想熟悉的都知道吧），可以说利用这个也可以手写一个小单页应用，可能你还没了解到这部分
|
 |
15
Curtion 2020-09-25 09:27:15 +08:00
|
 |
16
imswing 2020-09-25 09:56:33 +08:00 via iPhone
@godblessumilk ？ sessionStorage 不能跨 tab
|
|
17
BaiLinfeng OP @galikeoy 说到 vue 我就想到的是组件之间通信传值。浏览器多标签通信是真默认，说多网页之间相互通信获取还好理解点。
|
|
18
BaiLinfeng OP @Curtion 你写的吗？
|
|
19
Curtion 2020-09-25 14:09:41 +08:00
@BaiLinfeng #18 不是
|
 |
20
ruzztok 2020-09-25 14:35:04 +08:00
不问原理，问 api 的面试，我都懒得回答
|
|
21
BaiLinfeng OP @BaiLinfeng 太多文字了先进我收藏夹吃灰先，看了一点看不下去了
|
Select Language