V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
BaiLinfeng
V2EX  ›  程序员

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

  •  
  •   BaiLinfeng · 2020-09-24 20:30:25 +08:00 · 4153 次点击
    这是一个创建于 1281 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    21 条回复    2020-09-25 15:11:00 +08:00
    ysc3839
        1
    ysc3839  
       2020-09-24 20:32:20 +08:00 via Android
    就是同一网站不同页面之间的通信。
    mxT52CRuqR6o5
        2
    mxT52CRuqR6o5  
       2020-09-24 20:38:06 +08:00 via Android
    你用 window.open 打开一个页面会返回个对象,你能通过这个对象进行页面间通信,打开同源页面直接返回新开页面的 window 对象,可以对被打开页面随意控制,打开非同源页面通过返回对象上的 postMessage 通信
    mxT52CRuqR6o5
        3
    mxT52CRuqR6o5  
       2020-09-24 20:41:29 +08:00
    还可以通过 BroadcastChannel 或监听 localStorage 事件进行同源网站页面之间的通信
    eason1874
        4
    eason1874  
       2020-09-24 20:45:25 +08:00   ❤️ 4
    window.postMessage()

    比如你同时打开了多个 V 站页面,你想在有未读提醒的时候全部页面都显示未读提醒,在随意一个标签页点开消息之后其他标签页也自动更新到已读状态,最好的办法是标签页之间通信。
    BaiLinfeng
        6
    BaiLinfeng  
    OP
       2020-09-24 21:35:44 +08:00
    @mxT52CRuqR6o5 好模式的 api
    BaiLinfeng
        7
    BaiLinfeng  
    OP
       2020-09-24 21:36:05 +08:00
    @lin07hui 好陌生啊这个 api
    anUglyDog
        8
    anUglyDog  
       2020-09-24 21:57:28 +08:00
    其它标签页监听 storage 事件,本页面 localStorage.setItem 时其它页面可以收到消息。
    监听 message 事件,使用 sharedWorker 的 postMessage 可以使别的页面收到消息。
    重点:同域。
    anUglyDog
        9
    anUglyDog  
       2020-09-24 21:59:18 +08:00   ❤️ 1
    就算是老浏览器,你也可以通过服务器同步,或者就是在 cookie 里设置数据,setInterval 不断读写 cookie 数据也能多标签页同步数据。
    重点:不管技术多烂,你都可以完成目标。
    xieqiqiang00
        10
    xieqiqiang00  
       2020-09-24 21:59:28 +08:00
    用 localStorage 吧
    yeqizhang
        11
    yeqizhang  
       2020-09-24 22:17:24 +08:00 via Android   ❤️ 1
    看了楼上所说的,对通信这个词又陌生了……
    godblessumilk
        12
    godblessumilk  
       2020-09-25 01:05:01 +08:00 via Android
    我一般是用 sessionStorage
    shilianmlxg
        13
    shilianmlxg  
       2020-09-25 08:46:50 +08:00 via iPhone
    又陌生了起来
    galikeoy
        14
    galikeoy  
       2020-09-25 08:58:38 +08:00
    @BaiLinfeng #7 vue/react 等单页实例也是有这个 api 的实践(我想熟悉的都知道吧),可以说利用这个也可以手写一个小单页应用,可能你还没了解到这部分
    Curtion
        15
    Curtion  
       2020-09-25 09:27:15 +08:00
    imswing
        16
    imswing  
       2020-09-25 09:56:33 +08:00 via iPhone
    @godblessumilk ? sessionStorage 不能跨 tab
    BaiLinfeng
        17
    BaiLinfeng  
    OP
       2020-09-25 13:56:09 +08:00
    @galikeoy 说到 vue 我就想到的是组件之间通信传值。浏览器多标签通信是真默认,说多网页之间相互通信获取还好理解点。
    BaiLinfeng
        18
    BaiLinfeng  
    OP
       2020-09-25 14:04:39 +08:00
    @Curtion 你写的吗?
    Curtion
        19
    Curtion  
       2020-09-25 14:09:41 +08:00
    @BaiLinfeng #18 不是
    ruzztok
        20
    ruzztok  
       2020-09-25 14:35:04 +08:00
    不问原理,问 api 的面试,我都懒得回答
    BaiLinfeng
        21
    BaiLinfeng  
    OP
       2020-09-25 15:11:00 +08:00
    @BaiLinfeng 太多文字了先进我收藏夹吃灰先,看了一点看不下去了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1129 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 18:47 · PVG 02:47 · LAX 11:47 · JFK 14:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.