habilitar - enable javascript opera
Comunicación de Javascript entre pestañas/ventanas del navegador (10)
Esta pregunta ya tiene una respuesta aquí:
- Comunicación entre pestañas o ventanas 7 respuestas
¿Cuál es la forma más confiable de que Javascript se comunique entre pestañas / ventanas del mismo navegador? Por ejemplo, cuando la Pestaña 2 inicia la reproducción de audio, la Pestaña 1 de alguna manera lo sabe y puede detenerlo.
Estoy construyendo un sitio con un reproductor de música ... por lo que, en este momento, si abre dos pestañas en el sitio, puede iniciar música en ambas. Esto obviamente es malo, así que estoy tratando de encontrar una solución.
¿Algunas ideas? Gracias
No creo que necesites cookies. El código js de cada documento puede acceder a los otros elementos del documento. Entonces puede usarlos directamente para compartir datos. Su primera ventana w1 abre w2 y guarda la referencia
var w2 = window.open(...)
En w2 puede acceder a w1 usando la propiedad de apertura de la ventana.
Puede comunicarse entre las ventanas del navegador (y las pestañas también) usando cookies.
Aquí hay un ejemplo de emisor y receptor:
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>
editar: con Flash, puede comunicarse entre cualquier ventana, CUALQUIER navegador (sí, de FF a IE en tiempo de ejecución) ..ANÍA forma de instancia de flash (ShockWave / activeX)
Encontré una forma diferente de usar el almacenamiento local de HTML5. He creado una biblioteca con eventos como 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});
};
enviará mensajes a todas las otras páginas, pero no a la actual.
Puede hacerlo a través de la API de almacenamiento local. Tenga en cuenta que esto funciona solo entre 2 pestañas. no puede poner el emisor y el receptor en la misma página:
En la página del remitente:
localStorage.setItem("someKey", "someValue");
En la página del receptor
$(document).ready(function () {
window.addEventListener(''storage'', storageEventHandler, false);
function storageEventHandler(evt) {
alert("storage event called key: " + evt.key);
}
});
Puede comunicarse entre ventanas (con pestañas o no) si tienen una relación padre-hijo.
Crear y actualizar una ventana secundaria:
<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>
Las ventanas secundarias pueden usar el objeto parent para comunicarse con el padre que lo engendró, por lo que puede controlar el reproductor de música desde cualquiera de las ventanas.
Véalo en acción aquí: https://jsbin.com/cokipotajo/edit?html,js,output
Debajo de la ventana (w1) se abre otra ventana (w2). Cualquier ventana puede enviar / recibir mensajes a / desde otra ventana. Entonces, lo ideal sería verificar que el mensaje se originó desde la ventana (w2) que abrimos.
En w1
var w2 = window.open("abc.do");
window.addEventListener("message", function(event){
console.log(event.data);
});
En w2 (abc.do)
window.opener.postMessage("Hi! I''m w2", "*");
También hay una tecnología experimental llamada Broadcast Channel API que está diseñada específicamente para la comunicación entre diferentes contextos de navegador con el mismo origen. Puede publicar mensajes y recibir mensajes de otro contexto del navegador sin tener una referencia:
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"});
Obviamente, esta es una tecnología experiencial y no es compatible con todos los navegadores hasta el momento.
Para obtener una solución más moderna, visita https://.com/a/12514384/270274
Citar:
Me estoy apegando a la solución compartida de datos locales mencionada en la pregunta usando
localStorage. Parece ser la mejor solución en términos de fiabilidad, rendimiento y compatibilidad del navegador.
localStoragese implementa en todos los navegadores modernos.El evento de
storagese dispara cuando otras pestañaslocalStoragecambios enlocalStorage. Esto es bastante útil para fines de comunicación.Referencia:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event
Se admitió la comunicación entre diferentes contextos de ejecución de JavaScript incluso antes de HTML5 si los documentos eran del mismo origen. Si no es así o no tiene ninguna referencia al otro objeto de la Window , puede usar la nueva API postMessage introducida con HTML5. Desarrollé un poco en ambos enfoques en esta respuesta .