问题

今天遇到一个问题，在商品列表页面，打开一个新增商品的页面，新增完后，商品列表要立刻显示新增商品，这就需要新增商品后，通知订单列表页，也就是常说的跨tab页通信。跨tab页通信，不仅包含常见的跨tab页，还包括跨window窗口、跨frame、跨iframe。

解决方案

同源下，可使用BroadCastChannel实现跨tab页通信。

发送端
- 如果重复创建相同名称的channel，j底层channel只会创建一次。

// If it is the first to connect to that broadcast channel name,
// the underlying channel is created.
// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
// Example of sending of a very simple message
bc.postMessage('This is a test message.');

接收端

// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
// A handler that only logs the event to the console:
bc.onmessage = function (ev) { console.log(ev); }

关闭

// Disconnect the channel
bc.close();

这种方法比较简单，可以传任何数据对象（字符串、对象、数字等等），也是我比较推荐的方式。

window postMessage 方式

除了使用上述方式，还可以使用window.postMessage，缺点就是要持有目标window的引用，当页面刷新后，会失去目标window引用；优点就是可实现跨域通信。

发送端

//发送事件
targetWindow.postMessage(message, targetOrigin)

接收端

//接收事件
window.addEventListener("message", (event) => {if (event.origin !== "http://localhost:8080")return;// Do something
}, false);

storage event方式

也可以使用storage event来实现，原理就是监听storage set事件，来达到同步，但只能发送字符串，另外当前页面也不会获取本页发出的set事件。

发送端

//发送事件
window.localStorage.setItem("loggedIn", "true");

接收端

//接收事件
window.addEventListener('storage', (event) => {if (event.storageArea != localStorage) return;if (event.key === 'loggedIn') {// Do something with event.newValue}
});

js 跨浏览器tab页通信相关推荐

浏览器tab页签上的title图标favicon.icon
文章目录浏览器tab页签上的title图标favicon.icon 什么是favicon? 如何查看favicon 在线生成favicon 浏览器tab页签上的title图标如何设置浏览器tab页 ...
浏览器Tab页切换事件
浏览器Tab页切换事件 /**** 浏览器Tab页切换事件*/ document.addEventListener('visibilitychange',function(){if(document. ...
html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总，常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾本文主要介绍JS的跨浏览器兼容性 ...
js ajax 浏览器兼容,JS跨浏览器兼容，一点点总结
不同的浏览器,对不同的/相同的属性.方法等的支持程度也会有所差别,要想达到满意的效果,需要做一些处理.给不同的浏览器量体裁衣,也就是所说的达到兼容. 常见的处理方式:(能力检测和浏览器检测) 1.三目 ...
vue js监听浏览器tab页切换
最近开发了需求,浏览器播放视频,切换到其他tab页面视频暂停,切换回来视频重新播放.监听属性addEventListener用起来啊. 一顿操作猛如虎-结果能监听到离开和回来,但是这时候页面的dom找 ...
自定义报表-FineReport JS实现隐藏Tab页
1. 概述 1.1 问题描述在实际项目中,使用决策报表的时候,有时会用到在决策报表参数面板获取报表控件的值,那么该如何实现呢? 1.2 实现思路使用 JS 获取报表主体的控件值: _g().get ...
js跨浏览器事件处理
var EventUtil = {addHandler: function(element,type,handler){if(element.addEventListener){element.add ...
【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = {// ...
实现浏览器多标签页通信
前言我们都知道浏览器是可以打开很多标签页的,如果每个标签页代表的是单独的一个网站,那么这些标签页之间肯定是不能通信的,如果能通信那估计我们都得凉凉.但是在很多情况下,浏览器中的很多标签页都属于某一个 ...

js 跨浏览器tab页通信

问题

解决方案

window postMessage 方式

storage event方式

js 跨浏览器tab页通信相关推荐

最新文章

热门文章