跨浏览器窗口通讯的7种方式

跨浏览器窗口通讯的7种方式

羽叶
2021-09-14 / 3 评论 / 39 阅读 / 正在检测是否收录...

演示和源码

多页面通讯的demo, 为了正常运行,请用最新的chrome浏览器打开。

demo地址

demo的源码地址

两个浏览器窗口间通信

WebSocket

这个没有太多解释,WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。当然是有代价的,需要服务器来支持。
js语言,现在比较成熟稳定当然是 socket.iows. 也还有轻量级的ClusterWS

你可以在The WebSocket API (WebSockets) 看到更多的关于Web Socket的信息。

定时器 + 客户端存储

定时器:setTimeout/setInterval/requestAnimationFrame
客户端存储: cookie/localStorage/sessionStorage/indexDB/chrome的FileSystem

定时器没啥好说的,关于客户端存储。

  • cookie: 每次会带到服务端,并且能存的并不大,4kb?,记得不太清楚
  • localStorage/sessionStorage 应该是5MB, sessionStorage关闭浏览器就和你说拜拜。
  • indexDB 这玩意就强大了,不过读取都是异步的,还能存 Blob文件,真的是很high。
  • chrome的FileSystem ,Filesystem \& FileWriter API,主要是chrome和opera支持。这玩意就是文件系统。

postMessage

Cross-document messaging 这玩意的支持率98.9\%。 好像还能发送文件,哈哈,强大。
不过仔细一看 window.postMessage(),就注定了你首先得拿到window这个对象。 也注定他使用的限制, 两个窗体必须建立起联系。 常见建立联系的方式:

  • window.open
  • window.opener
  • iframe

提到上面的window.open, open后你能获得被打开窗体的句柄,当然也可以直接操作窗体了。


到这里,我觉得一般的前端人员能想到的比较正经的方案应该是上面三种啦。
当然,我们接下来说说可能不是那么常见的另外三种方式。

StorageEvent

Page 1

localStorage.setItem('message',JSON.stringify({
    message: '消息',
    from: 'Page 1',
    date: Date.now()
})

Page 2

window.addEventListener("storage", function(e) {
    console.log(e.key, e.newValue, e.oldValue)
})

如上, Page 1设置消息, Page 2注册storage事件,就能监听到数据的变化啦。

上面的e就是StorageEvent,有下面特有的属性(都是只读):

  • key :代表属性名发生变化.当被clear()方法清除之后所有属性名变为null
  • newValue:新添加进的值.当被clear()方法执行过或者键名已被删除时值为null
  • oldValue:原始值.而被clear()方法执行过,或在设置新值之前并没有设置初始值时则返回null
  • storageArea:被操作的storage对象
  • url:key发生改变的对象所在文档的URL地址

Broadcast Channel

这玩意主要就是给多窗口用的,Service Woker也可以使用。 firefox,chrome, Opera均支持,有时候真的是很讨厌Safari,浏览器支持77\%左右。

使用起来也很简单, 创建BroadcastChannel, 然后监听事件。 只需要注意一点,渠道名称一致就可以。
Page 1

    var channel = new BroadcastChannel("channel-BroadcastChannel");
    channel.postMessage('Hello, BroadcastChannel!'

Page 2

    var channel = new BroadcastChannel("channel-BroadcastChannel");
    channel.addEventListener("message", function(ev) {
        console.log(ev.data)
    })

SharedWorker

这是Web Worker之后出来的共享的Worker,不通页面可以共享这个Worker。
MDN这里给了一个比较完整的例子simple-shared-worker

这里来个插曲,Safari有几个版本支持这个特性,后来又不支持啦,还是你Safari,真是6。

虽然,SharedWorker本身的资源是共享的,但是要想达到多页面的互相通讯,那还是要做一些手脚的。 先看看MDN给出的例子的ShareWoker本身的代码:

onconnect = function(e) {
  var port = e.ports[0];

  port.onmessage = function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }

上面的代码其实很简单,port是关键,这个port就是和各个页面通讯的主宰者,既然SharedWorker资源是共享的,那好办,把port存起来就是啦。
看一下,如下改造的代码:
SharedWorker就成为一个纯粹的订阅发布者啦,哈哈。

var portList = [];

onconnect = function(e) {
  var port = e.ports[0];
  ensurePorts(port);
  port.onmessage = function(e) {
    var data = e.data;
    disptach(port, data);
  };
  port.start();
};

function ensurePorts(port) {
  if (portList.indexOf(port) < 0) {
    portList.push(port);
  }
}

function disptach(selfPort, data) {
  portList
    .filter(port => selfPort !== port)
    .forEach(port => port.postMessage(data));
}

MessageChannel

Channel Messaging API的 MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个MessagePort 属性发送数据。

其需要先通过 postMessage先建立联系。

MessageChannel的基本使用:

var channel = new MessageChannel();
var para = document.querySelector('p');

var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}  

至于在线的例子,MDN官方有一个版本 MessageChannel 通讯

0

评论 (3)

取消
  1. 头像
    三水非冰
    Windows 10 · Google Chrome

    每次来看大佬的博客都不是同一个样式,太花心了表情
    ps.最近我也往全栈(伪)的方向走了,开始学习一波前端,以后大佬多罩罩我,哈哈哈。

    回复
    1. 头像
      羽叶 作者
      Windows 10 · Google Chrome
      @ 三水非冰

      你都好久不更新了表情

      一起学习,一起加油表情

      回复
  2. 头像
    Money
    Windows 7 · Google Chrome

    网站每日ip 1千,交换友链,https://money1.us/521

    回复