Какой самый надежный способ обмена Javascript между вкладками/окнами одного и того же браузера? Например, когда Tab 2 запускает воспроизведение звука, Tab 1 как-то знает об этом и может приостановить его проигрыватель.
Я создаю сайт с музыкальным плеером... поэтому на данный момент, если вы откроете две вкладки на сайте, вы можете начать музыку на обоих. Это явно плохо, поэтому я пытаюсь найти решение.
Любые идеи? Спасибо
Это старый ответ, я предлагаю использовать современную версию, описанную здесь:
Javascript; связь между вкладками/окнами с одинаковым происхождением
Вы можете общаться между окнами браузера (и вкладками тоже), используя куки.
Вот пример отправителя и получателя:
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>
Для более современного решения проверьте fooobar.com/questions/44592/...
Цитата:
Я придерживаюсь общего решения локальных данных, упомянутого в вопросе, используя
localStorage. Это лучшее решение с точки зрения надежности, производительности и совместимости с браузером.
localStorageреализован во всех современных браузерах.Событие
storageсрабатывает, когда другие вкладки вносят изменения вlocalStorage. Это очень удобно для коммуникационных целей.Справка:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event
Я не думаю, что вам нужны куки. Каждый код js документа может обращаться к другим элементам документа. Поэтому вы можете использовать их напрямую для обмена данными. Ваше первое окно w1 открывает w2 и сохраняет ссылку
var w2 = window.open(...)
В w2 вы можете получить доступ к w1, используя свойство открывателя окна.
Вы можете сделать это через локальный API хранения. Обратите внимание, что это работает только между двумя вкладками. вы не можете поместить обоих отправителей и получателей на одну и ту же страницу:
На странице отправителя:
localStorage.setItem("someKey", "someValue");
На странице получателя
$(document).ready(function () {
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(evt) {
alert("storage event called key: " + evt.key);
}
});
Вы можете связываться между окнами (с вкладками или нет), если у них есть отношения между родителями и родителями.
Создайте и обновите дочернее окно:
<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
Ниже окна (w1) открывается другое окно (w2). Любое окно может отправлять/получать сообщения в/из другого окна. Поэтому мы должны в идеале убедиться, что сообщение возникло из окна (w2), которое мы открыли.
В w1
var w2 = window.open("abc.do");
window.addEventListener("message", function(event){
console.log(event.data);
});
В w2 (abc.do)
window.opener.postMessage("Hi! I'm w2", "*");
Существует также экспериментальная технология 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 поддерживалось даже до HTML5, если документы были одного источника. Если нет или у вас нет ссылки на другой объект Window, вы можете использовать новый postMessage API, представленный с HTML5. Я подробно остановился на обоих подходах в этом fooobar.com/questions/44598/....
Нашел другой способ, используя HTML5 localstorage, я создал библиотеку с такими событиями, как 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});
};
он отправит сообщения на все другие страницы, но не для текущего.
изменить: С помощью Flash вы можете общаться между любыми окнами, ЛЮБЫМ браузером (да, от FF до IE во время выполнения). Форма формы INNA для вспышки (ShockWave/activeX)