浏览器多tab页面间的通信解决方案-阿里云开发者社区

开发者社区> xiawang1024> 正文

浏览器多tab页面间的通信解决方案

简介: 当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互。其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议、域名和端口),也可以是跨域的。本方案只讨论同源也就是同域的场景。
+关注继续查看


若要实现两个互不相关的通源tab页面通信,可以使用一种比较巧妙的方式:localstorage。localStorage的存储遵循同源策略,因此同源的两个tab页面可以通过这种共享localStorage的方式实现通信,通过约定localStorage的某一个itemName,基于该key值的内容作为“共享硬盘”方式通信。


HTML5提供了storage事件,通过window对象监听storage事件,会侦听到localStorage对象的变化事件(setItem和removeItem)。因此通过事件可以完成高效的通信机制。


A 页面

window.addEventListener("storage", function(ev){
    if (ev.key == 'message') {
        // removeItem同样触发storage事件,此时ev.newValue为空
        if(!ev.newValue)
            return;
        var message = JSON.parse(ev.newValue);
        console.log(message);
    }
});

function sendMessage(message){
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}

// 发送消息给B页面
sendMessage('this is message from A');
B 页面

window.addEventListener("storage", function(ev){
    if (ev.key == 'message') {
        // removeItem同样触发storage事件,此时ev.newValue为空
        if(!ev.newValue)
            return;
        var message = JSON.parse(ev.newValue);
        // 发送消息给A页面
        sendMessage('message echo from B');
    }
});

function sendMessage(message){
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}

发送消息采用sendMessage函数,该函数序列化消息,设置为localStorage的message字段值后,删除该message字段。这样做的目的是不污染localStorage空间,但是会造成一个无伤大雅的反作用,即触发两次storage事件,因此我们在storage事件处理函数中做了if(!ev.newValue) return;判断。


当我们在A页面中执行sendMessage函数,其他同源页面会触发storage事件,而A页面却不会触发storage事件;而且连续发送两次相同的消息也只会触发一次storage事件。


通过这种方式,可以实现同源下的两个tab页通信

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云云安全中心入选Gartner CWPP全球市场指南 为客户提供一体化安全解决方案
这次入选的阿里云云安全中心就是这样一款集主机安全、容器安全和安全运营管理中心为一体的解决方案。通过一个平台实现集中式安全管理,不仅可以做好主机层面的反病毒、防勒索、防黑客等基本安全防护,而且可以实现从安全加固、威胁检测、到调查响应、主动防御为一体的自动化安全运营闭环,让企业里的安全运营人员从海量告警中解放出来,同时帮助云上缺乏专业安全运营人员的客户自动修复安全问题,实现全方位默认安全防护。
5368 0
远程容器镜像的解决方案 Overlaybd
Accelerated Container Image是论文“DADI: Block-Level Image Service for Agile and Elastic Application Deployment.USENIX ATC'20”的开源实现。它是远程容器镜像的解决方案,支持按需获取镜像数据,无需在容器运行前下载和解压整个镜像。 加速的核心是overlaybd,它提供了作为块设备的一系列基于块的层的合并视图。该存储库是加速集装箱图像的组成部分,提供了由iSCSI和overlaybd的实施TCMU。
83 0
RecyclerView实现多type页面
目录介绍 01.先看看实际需求 02.adapter实现多个type 03.这样写的弊端 04.如何优雅实现adapter封装 好消息 博客笔记大汇总【16年3月到至今】,包括Java基础及深入知识点,Android技术博客,Python学习笔记等等,还包括平时开发中遇到的bug汇总,当然也...
668 0
javascript 一个关于时间排序的算法(一个页面多个倒计时排序)
上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页面的dom效果,可是再看了两遍发现可以 于是我就改了改 实现了 不禁感叹 确实蛮赞的 于是就博一客;...
836 0
阿里云推出全球应用加速解决方案,快速提升跨域应用访问体验
近日,阿里云全球加速产品推出全球应用加速等多个新特性,融合云安全DDoS高防与WAF的安全防护能力,结合云解析智能DNS与GTM全局流量调度,保障企业全球应用部署的高质量、高安全、高可靠。另外邀请到在线互联网教育机构—豌豆思维,进一步分享了他们使用全球加速的经验。
502 0
fbh
Chrome浏览器强制刷新页面(不使用缓存)
在Chrome浏览器中按下F5或 Ctrl+F5 都没用,Chrome总是会强制使用页面缓存进行刷新,如何不使用页面缓存进行刷新? Chrome官方推荐使用如下快捷键,就可以不使用页面缓存进行刷新 Windows和Linu...
3638 0
云栖新品|阿里云IoT发布云芯一体智能视觉解决方案
在2021云栖大会IoT云端一体硬件与应用创新峰会上,阿里云IoT发布了Link Visual 云芯一体化智能视觉解决方案,宣布Link Visual从单一视频云服务平台向芯云一体化智能视觉解决方案升级。
137 0
+关注
34
文章
60
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载