JavaScript communication entre les onglets/fenêtres du navigateur [dupliquer]
cette question a déjà une réponse ici:
- Communication entre onglets ou windows 8 réponses
Quel est le moyen le plus fiable pour que Javascript Communique entre les onglets/fenêtres du même navigateur? Par exemple, quand L'onglet 2 démarre la lecture audio, L'onglet 1 sait en quelque sorte à ce sujet et peut mettre en pause il est Joueur.
je construis un site avec un lecteur de musique... donc en ce moment si vous ouvrez deux onglets sur le site, vous pouvez commencer la musique sur les deux. C'est évidemment mauvais, donc j'essaye de trouver une solution.
des idées? Merci
10 réponses
vous pouvez communiquer entre les fenêtres du navigateur (et les onglets aussi) en utilisant des cookies.
voici un exemple d'expéditeur et de destinataire:
expéditeur.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>
récepteur.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>
pour une solution plus moderne, cliquez sur https://stackoverflow.com/a/12514384/270274
citation:
Je m'en tiens à la solution de données locales partagées mentionnée dans la question en utilisant
localStorage. Elle semble être la meilleure solution en termes de fiabilité, de performance et de compatibilité avec les navigateurs.
localStorageest implémenté dans tous les navigateurs modernes.l'événement
storagese déclenche lorsque autre tabs apporte des changements àlocalStorage. C'est assez pratique pour des fins de communication.référence:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event
Je ne pense pas que vous ayez besoin de cookies. Le code js de chaque document peut accéder aux autres éléments du document. Vous pouvez donc les utiliser directement pour partager des données. Votre première fenêtre W1 ouvre w2 et enregistre la référence
var w2 = window.open(...)
dans w2 vous pouvez accéder à w1 en utilisant la propriété d'ouverture de fenêtre.
vous pouvez le faire via L'API de stockage local. Notez que cela ne fonctionne qu'entre 2 onglets. vous ne pouvez pas mettre l'expéditeur et le destinataire sur la même page:
sur la page de l'expéditeur:
localStorage.setItem("someKey", "someValue");
sur la page de réception
$(document).ready(function () {
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(evt) {
alert("storage event called key: " + evt.key);
}
});
vous pouvez communiquer entre les fenêtres (tabulées ou non) si elles ont une relation enfant-parent.
créer et mettre à jour une fenêtre enfant:
<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>
les fenêtres enfant peuvent utiliser l'objet parent pour communiquer avec le parent qui l'a généré, de sorte que vous pouvez contrôler le lecteur de musique à partir de l'une ou l'autre des fenêtres.
Voir en action ici: https://jsbin.com/cokipotajo/edit?html,js,sortie
communiquer entre différents contextes D'exécution JavaScript a été supporté même avant HTML5 si les documents étaient de la même origine. Si non ou si vous n'avez aucune référence à l'autre objet Window , alors vous pouvez utiliser le nouveau postMessage API introduit avec HTML5. J'ai élaboré un peu sur les deux approches dans ce stackoverflow réponse .
ci-dessous la fenêtre(w1) ouvre une autre fenêtre(w2). Toute fenêtre peut envoyer/recevoir un message depuis / vers une autre fenêtre. Nous devrions donc idéalement vérifier que le message provient de la fenêtre(w2) que nous avons ouverte.
w1
var w2 = window.open("abc.do");
window.addEventListener("message", function(event){
console.log(event.data);
});
Dans w2(abc.n')
window.opener.postMessage("Hi! I'm w2", "*");
il existe également une technologie expérimentale appelée Broadcast Channel API qui est conçue spécifiquement pour la communication entre différents contextes de navigateur avec la même origine. Vous pouvez poster des messages vers et recevoir des messages depuis un autre contexte de navigateur sans avoir une référence à celui-ci:
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"});
évidemment, il s'agit d'une technologie expérimentale et n'est pas encore prise en charge par tous les navigateurs.
J'ai trouvé une façon différente d'utiliser HTML5 localstorage, j'ai créé une bibliothèque avec des événements comme 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});
};
il enverra des messages à toutes les autres pages, mais pas pour la page actuelle.
modifier: Avec Flash vous pouvez communiquer entre n'importe quelle fenêtre, n'importe quel navigateur (oui, de FF À IE à l'exécution ) ..Toute forme de flash (ShockWave / activeX)