Communication entre les onglets/fenêtres du navigateur à l'aide de JavaScript

Question

Quel est le moyen le plus fiable de faire communiquer JavaScript entre les onglets/fenêtres d'un même navigateur ? Par exemple, lorsque l'onglet 2 lance la lecture d'un fichier audio, l'onglet 1 le sait et peut mettre son lecteur en pause.

Je suis en train de construire un site avec un lecteur de musique... donc pour le moment si vous ouvrez deux onglets sur le site, vous pouvez lancer la musique sur les deux. C'est évidemment mauvais, donc j'essaie de trouver une solution.

Answer 1

Pour une solution plus moderne, consultez https://stackoverflow.com/a/12514384/270274

Citation :

Je m'en tiens à la solution des données locales partagées mentionnée dans la question en utilisant localStorage . Il semble que ce soit la meilleure solution en termes de fiabilité, de performances et de compatibilité avec les navigateurs.

localStorage est implémenté dans tous les navigateurs modernes.

El storage se déclenche lorsque otros Les onglets apportent des modifications à localStorage . C'est très pratique pour la communication.

Référence :
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event

Answer 2

Mise à jour vers une solution moderne, en laissant l'ancienne ci-dessous pour des raisons historiques.

Vous pouvez utiliser l'API du canal de diffusion pour envoyer et recevoir des messages. https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');

// Example of sending of a very simple message
// It doesn't have to be a string, it could be a JS object
bc.postMessage('This is a test message.');

Pour recevoir le message :

// A handler that only logs the event to the console:
bc.onmessage = function (ev) {
  console.log(ev);
}

et pour fermer le canal :

// Disconnect the channel
bc.close();

---

IL S'AGIT D'UNE ANCIENNE MÉTHODE HISTORIQUE, UTILISEZ LA MÉTHODE CI-DESSUS POUR LES NAVIGATEURS MODERNES !

Vous pouvez communiquer entre les fenêtres du navigateur (et les onglets aussi) en utilisant des cookies.

Voici un exemple d'émetteur et de récepteur :

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>

Answer 3

Je ne pense pas que vous ayez besoin de cookies. Le code JavaScript 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é opener de window .

Answer 4

La communication entre différents contextes d'exécution JavaScript était supportée même avant HTML5 si les documents étaient de la même origine.

Si ce n'est pas le cas ou si vous n'avez pas de référence à l'autre Window vous pouvez alors utiliser le nouvel objet API postMessage introduit avec HTML5. J'ai développé un peu les deux approches dans cette réponse de Stack Overflow .

Answer 5

Vous pouvez communiquer entre les fenêtres (avec ou sans onglet) 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>

Child Windows peut utiliser le parent pour communiquer avec le parent qui l'a engendré, de sorte que vous pouvez contrôler le lecteur de musique à partir de n'importe quelle fenêtre.

Voyez-le en action ici : https://jsbin.com/cokipotajo/edit?html,js,output