让 JavaScript 在同一浏览器的选项卡/窗口之间进行通信的最可靠方法是什么?例如,当 Tab 2 开始播放音频时,Tab 1 以某种方式知道这一点并可以暂停其播放器。
我正在建立一个带有音乐播放器的网站...所以目前如果您打开该网站的两个选项卡,您可以在这两个选项卡上播放音乐。这显然很糟糕,所以我正在努力寻找解决方案。
让 JavaScript 在同一浏览器的选项卡/窗口之间进行通信的最可靠方法是什么?例如,当 Tab 2 开始播放音频时,Tab 1 以某种方式知道这一点并可以暂停其播放器。
我正在建立一个带有音乐播放器的网站...所以目前如果您打开该网站的两个选项卡,您可以在这两个选项卡上播放音乐。这显然很糟糕,所以我正在努力寻找解决方案。
如需更现代的解决方案,请查看https://stackoverflow.com/a/12514384/270274
引用:
我坚持使用问题中提到的共享本地数据解决方案
localStorage
。它似乎是可靠性、性能和浏览器兼容性方面的最佳解决方案。
localStorage
在所有现代浏览器中实现。
storage
当其他选项卡对 进行更改时会触发该事件localStorage
。这对于通信目的非常方便。参考:
http : //dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event
更新到现代解决方案,由于历史原因将旧解决方案保留在下方。
您可以使用广播频道 API 来发送和接收消息 https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
// Example of sending of a very simple message
// It doesn't have to be a string, it could be a JS object
bc.postMessage('This is a test message.');
要接收消息:
// A handler that only logs the event to the console:
bc.onmessage = function (ev) {
console.log(ev);
}
并关闭通道:
// Disconnect the channel
bc.close();
这是历史悠久的老方法,对现代浏览器使用上述方法!
您可以使用 cookie 在浏览器窗口(以及选项卡)之间进行通信。
以下是发送方和接收方的示例:
发件人.html
<h1>Sender</h1>
<p>Type into the text box below and watch the text
appear automatically in the receiver.</p>
<form name="sender">
<input type="text" name="message" size="30" value="">
<input type="reset" value="Clean">
</form>
<script type="text/javascript"><!--
function setCookie(value) {
document.cookie = "cookie-msg-test=" + value + "; path=/";
return true;
}
function updateMessage() {
var t = document.forms['sender'].elements['message'];
setCookie(t.value);
setTimeout(updateMessage, 100);
}
updateMessage();
//--></script>
接收器.html:
<h1>Receiver</h1>
<p>Watch the text appear in the text box below as you type it in the sender.</p>
<form name="receiver">
<input type="text" name="message" size="30" value="" readonly disabled>
</form>
<script type="text/javascript"><!--
function getCookie() {
var cname = "cookie-msg-test=";
var ca = document.cookie.split(';');
for (var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(cname) == 0) {
return c.substring(cname.length, c.length);
}
}
return null;
}
function updateMessage() {
var text = getCookie();
document.forms['receiver'].elements['message'].value = text;
setTimeout(updateMessage, 100);
}
updateMessage();
//--></script>
还有一种叫做实验性的技术Broadcast Channel API
,它是专门为具有相同起源的不同浏览器上下文之间的通信而设计的。您可以向另一个浏览器上下文发布消息和从另一个浏览器上下文接收消息,而无需引用它:
var channel = new BroadcastChannel("foo");
channel.onmessage = function( e ) {
// Process messages from other contexts.
};
// Send message to other listening contexts.
channel.postMessage({ value: 42, type: "bar"});
显然,这是一项经验性技术,尚不支持所有浏览器。
我认为你不需要饼干。每个文档的 JavaScript 代码都可以访问其他文档元素。因此您可以直接使用它们来共享数据。
您的第一个窗口 w1 打开 w2 并保存参考
var w2 = window.open(...)
在 w2 中,您可以使用 的 opener 属性访问 w1 window
。
您可以通过本地存储 API 执行此操作。请注意,这仅适用于两个选项卡之间。您不能将发送方和接收方放在同一页面上:
在发件人页面上:
localStorage.setItem("someKey", "someValue");
在接收器页面上:
$(document).ready(function () {
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(evt) {
alert("storage event called key: " + evt.key);
}
});