代码之家 › 专栏 › 技术社区 › adamJLev

浏览器选项卡/窗口之间的javascript通信[重复]

browser javascript

141

adamJLev · 技术社区 · 14 年前

这个问题已经有了答案:

Communication between tabs or windows 9答

让javascript在同一浏览器的选项卡/窗口之间进行通信最可靠的方法是什么?例如,当标签2开始播放音频时,标签1不知何故知道这一点,并可以暂停它的播放器。

我正在用音乐播放器建立一个网站…所以现在,如果你打开两个标签到网站,你可以开始两个音乐。这显然是不好的,所以我正试图找到解决办法。

有什么想法吗? 谢谢

10 回复 | 直到 6 年前

Roman Goyenko 6 年前

Javascript; communication between tabs/windows with same origin

<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>

<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>

143

Community Reversed Engineer 7 年前

https://stackoverflow.com/a/12514384/270274

localStorage

storage

http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

donkeydown 12 年前

var w2 = window.open(...)

David Dehghan 9 年前

localStorage.setItem("someKey", "someValue");

    $(document).ready(function () {

        window.addEventListener('storage', storageEventHandler, false);

        function storageEventHandler(evt) {
            alert("storage event called key: " + evt.key);
        }
    });

Leonid Vasilev 8 年前

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"});

Victor Stoddard 9 年前

<html>
<head>
<title>Cross window test script</title>
<script>
var i = 0;
function open_and_run() {
    var w2 = window.open("", "winCounter"); 
    var myVar=setInterval(function(){myTimer(w2)},1000);
}

function myTimer(w2) {
    i++;
    w2.document.body.innerHTML="<center><h1>" + i + "</h1><p></center>";
}
</script>
</head>
<body>
Click to open a new window 
<button onclick="open_and_run();">Test This!</button>    
</body>
</html>

parent

https://jsbin.com/cokipotajo/edit?html,js,output

Ashwin Aggarwal 8 年前

var w2 = window.open("abc.do");
window.addEventListener("message", function(event){
    console.log(event.data);
});

window.opener.postMessage("Hi! I'm w2", "*");

Community Reversed Engineer 7 年前

Window stackoverflow answer

jcubic 10 年前

sysend.on('foo', function(message) {
    console.log(message);
});
var input = document.getElementsByTagName('input')[0];
document.getElementsByTagName('button')[0].onclick = function() {
    sysend.broadcast('foo', {message: input.value});
};

-2

Jakob Sternberg 12 年前