Giao tiếp Javascript giữa các tab/cửa sổ trình duyệt

Question

Cách đáng tin cậy nhất để giao tiếp Javascript giữa các tab/cửa sổ của cùng một trình duyệt là gì? Ví dụ, khi Tab 2 bắt đầu phát lại âm thanh, Tab 1 bằng cách nào đó biết về điều này và có thể tạm dừng trình phát của nó.

Tôi đang xây dựng một trang web có trình phát nhạc ... vì vậy tại thời điểm này nếu bạn mở hai tab vào trang web, bạn có thể bắt đầu phát nhạc trên cả hai. Điều này rõ ràng là xấu, vì vậy tôi đang cố gắng tìm một giải pháp.

Bất kỳ ý tưởng nào? Cảm ơn

Answer 1

Bạn cũng có thể liên lạc giữa các cửa sổ trình duyệt (và các tab) bằng cookie.

Dưới đây là một ví dụ về người gửi và người nhận:

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> 

Answer 2

Tôi không nghĩ rằng bạn cần cookie. Mã js của mỗi tài liệu có thể truy cập các phần tử tài liệu khác. Vì vậy, bạn có thể sử dụng chúng trực tiếp để chia sẻ dữ liệu. W1 cửa sổ đầu tiên bạn mở W2 và lưu các tài liệu tham khảo

var w2 = window.open(...) 

Trong W2, bạn có thể truy cập vào W1 bằng thuộc tính mở của cửa sổ.

Answer 3

chỉnh sửa: Với Flash bạn có thể giao giữa bất kỳ cửa sổ, bất kỳ trình duyệt (có, từ FF IE khi chạy) Hình thức ..ANY sơ thẩm của đèn flash (ShockWave/activeX)

Answer 4

Đối với một giải pháp hiện đại hơn kiểm tra https://stackoverflow.com/a/12514384/270274

Trích:

tôi gắn bó với giải pháp dữ liệu địa phương chia sẻ đề cập trong câu hỏi sử dụng localStorage. Nó có vẻ là giải pháp tốt nhất về độ tin cậy, hiệu suất và khả năng tương thích của trình duyệt.

localStorage được triển khai trong tất cả các trình duyệt hiện đại.

Sự kiện storage kích hoạt khi các tab khác thực hiện thay đổi đối với localStorage. Điều này khá thuận tiện cho mục đích giao tiếp.

tham khảo:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

Answer 5

Giao tiếp giữa khác nhau bối cảnh thực thi mã JavaScript được hỗ trợ ngay cả trước khi HTML5 nếu tài liệu là của cùng một nguồn gốc. Nếu không hoặc bạn không có tham chiếu đến đối tượng khác Window, thì bạn có thể sử dụng API postMessage mới được giới thiệu với HTML5. Tôi đã xây dựng một chút về cả hai cách tiếp cận trong số stackoverflow answer này.

Answer 6

Tìm thấy cách khác nhau sử dụng HTML5 localStorage, tôi đã tạo ra một thư viện với các sự kiện như API:

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

nó sẽ gửi tin nhắn cho tất cả các trang khác nhưng không phải cho hiện tại.

Answer 7

Bạn có thể giao tiếp giữa các cửa sổ (theo tab hoặc không) nếu có mối quan hệ giữa cha và con.

Tạo và cập nhật một cửa sổ con:

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

cửa sổ Trẻ em có thể sử dụng đối tượng parent để giao tiếp với cha mẹ đã sinh ra nó, vì vậy bạn có thể kiểm soát các máy nghe nhạc từ một trong hai cửa sổ.

Xem hoạt động tại đây: https://jsbin.com/cokipotajo/edit?html,js,output

Answer 8

Bạn có thể thực hiện việc này thông qua API bộ nhớ cục bộ. Lưu ý rằng thao tác này chỉ hoạt động giữa 2 tab. bạn không thể đưa cả người gửi và người nhận trên cùng một trang:

Trên trang sender:

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

Trên trang thu

$(document).ready(function() { 

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

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

Answer 9

Dưới cửa sổ (W1) mở ra một cửa sổ khác (W2). Bất kỳ cửa sổ nào cũng có thể gửi/nhận tin nhắn đến/từ cửa sổ khác. Vì vậy, chúng tôi lý tưởng nên xác minh rằng thông điệp có nguồn gốc từ cửa sổ (w2) chúng tôi đã mở.

Trong W1

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

Trong W2 (abc.do)

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

Answer 10

Ngoài ra còn có một công nghệ thử nghiệm gọi là Broadcast Channel API được thiết kế đặc biệt để liên lạc giữa bối cảnh trình duyệt khác nhau với cùng một nguồn gốc. Bạn có thể gửi tin nhắn đến và tin nhắn nhận được từ một bối cảnh trình duyệt mà không cần phải một tham chiếu đến nó:

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

Rõ ràng đây là công nghệ thí nghiệm và không được hỗ trợ accross tất cả các trình duyệt được nêu ra.