这个问题已经在这里有一个答案:
- 标签或窗口之间的通信 9回答
是否有可能有浏览器标签/窗口之间基于事件的通信?
我知道,这可能是(至少在理论上)可能使用本地存储 。 能否请您提供的代码做小例子吗? 就在一个标签发送事件,而在另一个接收它。
是否有任何库/ jQuery的插件,这样做吗?
(我知道我可以使用的cookie的同一浏览器的窗口/标签之间的通信;但是这不是我所需要的,我宁愿基于事件的方法,我不想重新检查每毫秒饼干的状态)。
这个问题已经在这里有一个答案:
是否有可能有浏览器标签/窗口之间基于事件的通信?
我知道,这可能是(至少在理论上)可能使用本地存储 。 能否请您提供的代码做小例子吗? 就在一个标签发送事件,而在另一个接收它。
是否有任何库/ jQuery的插件,这样做吗?
(我知道我可以使用的cookie的同一浏览器的窗口/标签之间的通信;但是这不是我所需要的,我宁愿基于事件的方法,我不想重新检查每毫秒饼干的状态)。
localStorage的有,你可以订阅到syncronize其他页面的事件。
注意:如果更新窗口A键的值,该事件将不会在窗口A.触发它会在窗口B&C.被触发
这里是一个演示: http://html5demos.com/storage-events
在几个选项卡中打开此页面。 更改输入端的值,看看它反映在div的。
下面是代码的JavaScript:
var dataInput = document.getElementById('data'),
output = document.getElementById('fromEvent');
// handle updates to the storage-event-test key in other windows
addEvent(window, 'storage', function (event) {
if (event.key == 'storage-event-test') {
output.innerHTML = event.newValue;
}
});
// Update the storage-event-test key when the value on the input is changed
addEvent(dataInput, 'keyup', function () {
localStorage.setItem('storage-event-test', this.value);
});
标记:
<div>
<p>Your test data: <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(this is only echoed on <em>other</em> windows)</small></p>
<p id="fromEvent">Waiting for data via <code>storage</code> event...</p>
</div>
在HTML 5规范介绍了该事件传递的所有信息:
[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
dictionary StorageEventInit : EventInit {
DOMString key;
DOMString? oldValue;
DOMString? newValue;
DOMString url;
Storage? storageArea;
};
来源: http://www.w3.org/TR/webstorage/#the-storage-event
使用此事件,可以使其他网页反应过来的时候在本地存储某个特定密钥的更新。
给SignalRamp的机会。
您可以将任何可绑定的类名来元素syncronize相应的鼠标按下,鼠标松开,悬停(鼠标悬停,鼠标移出),或点击UI事件。