在同一浏览器的选项卡/窗口之间进行JavaScript通信的最可靠方法是什么?例如,当选项卡2开始播放音频时,选项卡1以某种方式知道这一点并可以暂停其播放器。
我正在建立一个带有音乐播放器的网站…因此,如果您现在打开该网站的两个标签,则可以同时在两者上播放音乐。这显然是不好的,所以我正在尝试寻找解决方案。
有任何想法吗?谢谢
这是一个旧的答案,我建议使用此处描述的现代版本:
Javascript;具有相同来源的选项卡/窗口之间的通信
您可以使用Cookie在浏览器窗口之间(以及选项卡之间)进行通信。
这是发送方和接收方的示例:
sender.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>
receiver.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>