JavaScript的; 具有相同来源的标签/窗口之间的通信

Question

我有两个窗口:窗口A和窗口B.

• 窗口A和窗口B具有相同的域
• 窗口A和窗口B没有任何父窗口.

问题:

1. 窗口A是否可以获得窗口B的引用？
2. 什么是最优雅的方式使窗口A通知窗口B？
   (包括新的HTML5规范)

我知道这样做的两种方式:

• 服务器消息传递:窗口B常规询问服务器窗口A是否已通知某事
• 通过本地数据进行消息传递(HTML5):当窗口A想要通知它改变本地数据的东西时,窗口B定期检查本地数据是否有任何变化.

但这两种方式并不那么优雅.
例如,获得窗口B的引用并使用window.postMessage()(HTML5)会很不错

最终的目标是制作像facebook这样的东西,如果你打开4个Facebook标签并在一个标签中聊天,聊天是最新的每个Facebook标签,这是整洁的!

Answer 1

我坚持使用问题中提到的共享本地数据解决方案localStorage.它似乎是可靠性,性能和浏览器兼容性方面的最佳解决方案.

localStorage 在所有现代浏览器中实现.

storage当其他选项卡进行更改时,事件将触发localStorage.这对于通信目的非常方便.

参考资料可以在这里找到:
Webstorage
Webstorage - 存储事件

Answer 2

BroadcastChannel标准允许这样做.现在它在Firefox和Chrome(caniuse,mdn)中实现:

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});

Answer 3

SharedWorker是WHATWG/HTML5规范,用于可以在选项卡之间进行通信的通用进程.