电商网站的制作,wordpress图片显示缩略图,郑州网站外包公司简介,网络广告营销案例分析在浏览器中#xff0c;我们可以同时打开多个Tab页#xff0c;每个Tab页可以粗略理解为一个“独立”的运行环境#xff0c;即使是全局对象也不会在多个Tab间共享。然而有些时候#xff0c;我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。这就是本文说说…
在浏览器中我们可以同时打开多个Tab页每个Tab页可以粗略理解为一个“独立”的运行环境即使是全局对象也不会在多个Tab间共享。然而有些时候我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。这就是本文说说的跨页面通信方案那么目前有哪些跨页面的通信方案呢本文重点介绍一下。
同源页面之间跨页面通信一般有如下几种方案。
一、BroadCast Channel
目前查了一下兼容性除了ie之外所有浏览器基本都支持这个api了所以可以大胆用起来假如确实要支持ie也可以用polyfill。
具体语法和websocket有点像如下 const bc new BroadcastChannel(haorooms);//可以接受一个DOMString作为 name用以标识这个 channel。在其他页面可以通过传入相同的 name 来使用同一个广播频道。只用同样标识的页面才能收到广播不同的收不到。console.log(bc.name) // 输出构造实例的标识haorooms。bc.onmessage function(e) {// 通过onmessage监听事件console.log(receive:, e.data);};bc.addEventListener(message,(e){// 通过addEventLister监听事件和上面的onmessage都可以二选一我个人倾向addEventlisterconsole.log(receivebyaddEventlistener:, e.data);})bc.onmessageerror function(e) {console.warn(error:, e);}bc.postMessage(hello haorooms test broadcastchannel)
关闭
bc.close();
备注这种方式好处是发送广播之后自己 不会再收到其他使用了相同实例的页面可以时时收到。用起来也很方便非常简单和易用。
二、Service Worker
PWA的Service Worker也可以实现 不同页面之间的通信。
步骤如下
首先需要在页面注册 Service Worker
/* 页面逻辑 */
navigator.serviceWorker.register(../haorooms.sw.js).then(function () {console.log(Service Worker 注册成功);
});
其中../haorooms.sw.js是对应的 Service Worker 脚本。Service Worker 本身并不自动具备“广播通信”的功能需要我们添加些代码将其改造成消息中转站
/* ../haorooms.sw.js Service Worker 逻辑 */
self.addEventListener(message, function (e) {console.log(service worker receive message, e.data);e.waitUntil(self.clients.matchAll().then(function (clients) {if (!clients || clients.length 0) {return;}clients.forEach(function (client) {client.postMessage(e.data);});}));
});
处理完 Service Worker我们需要在页面监听 Service Worker 发送来的消息。
/* 页面逻辑 */
navigator.serviceWorker.addEventListener(message, function (e) {const data e.data;const text [receive] data.msg —— haorooms_tab data.from;console.log([Service Worker] receive message:, text);
});
最后当需要同步消息时可以调用 Service Worker 的postMessage方法
/* 页面逻辑 */
navigator.serviceWorker.controller.postMessage(mydata);
三、LocalStorage
作为前端LocalStorage是再熟悉不过了但是用这个作为页面通信还是头一次。这里通信其实只是简单的通信主要通过LocalStorage的事件来完成的。
当 LocalStorage 变化时会触发storage事件。利用这个特性我们可以在发送消息时把消息写入到某个 LocalStorage 中然后在各个页面内通过监听storage事件即可收到通知。
window.addEventListener(storage, function (e) {if (e.key haorooms_localstoragekey) {const data JSON.parse(e.newValue);const text [receive] data.msg —— haorooms_tab1 data.from;console.log([Storage I] receive message:, text);}
}); 四、其他
之所以写其他是因为方案只是可以完成页面通信但是不是实际意义上面的通信例如Shared Worker、IndexedDB、cookie可以通过共享存储的方式来完成通信。window.open window.opener这种方式可以通过扣扣相传的方式完成通信还有websocket方式可以通过服务中转方案完成通信。 这里不详细展开介绍感兴趣的可以搜索。
非同源页面之间的通信
非同源通信相对较麻烦一些我们可以使用一个用户不可见的 iframe 作为“桥”。由于 iframe 与父页面间可以通过指定origin来忽略同源限制因此可以在每个页面中嵌入一个 iframe 例如haorooms.com/bridge.html而这些 iframe 由于使用的是一个 url因此属于同源页面其通信方式可以复用上面第一部分提到的各种方式。
/* iframe 内代码 */
const bc new BroadcastChannel(haorooms_bc);
// 收到来自页面的消息后在 iframe 间进行广播
window.addEventListener(message, function (e) {bc.postMessage(e.data);
}); 其他 iframe 收到通知后则会将该消息同步给所属的页面
/* iframe 内代码 */
// 对于收到的iframe广播消息通知给所属的业务页面
bc.onmessage function (e) {window.parent.postMessage(e.data, *);
};
