Javascript Girl
  1. Javascript Girl
  3. Est-il possible d'avoir une communication événementielle entre les fenêtres du navigateur?
Intereting Posts
Usage de la mangue de la méthode .select () HttpMediaTypeNotAcceptableException Unity3D – Télécharger une image de la mémoire PC vers l'application WebGL Évitez la précédente requête ajax en appelant à nouveau la même requête ajax dans jquery Promettez-vous comment mettre en œuvre dans cette situation? Quel est le contexte d'une fonction anonyme? Appeler la fonction asynchrone à l'intérieur pour la boucle La chaîne JavaScript ou jQuery se termine par la fonction utilitaire Y a-t-il une utilisation pour les variables primitives en javascript? Comment faire pivoter horizontalement une image Backbone.js est-il vraiment un MVC? Les tableaux vides semblent égaux à vrai et faux en même temps ++ someVariable vs. SomeVariable ++ en Javascript Retard de mise à jour du travailleur Ne pas autoriser les caractères spéciaux sauf les caractères autorisés javascript regex

Est-il possible d'avoir une communication événementielle entre les fenêtres du navigateur?

Est-il possible d'avoir une communication événementielle entre les onglets / fenêtres du navigateur?

Je savais que cela pourrait être (au moins théoriquement) possible en utilisant un stockage local . Pourriez-vous fournir un petit exemple de code? Envoyez simplement l'événement dans un onglet, et recevez-le dans un autre.

Existe-t-il des bibliothèques / jquery-plugins qui font cela?

(Je sais que je peux communiquer entre windows / tabs du même navigateur à l'aide de cookies, mais ce n'est pas ce dont j'ai besoin; je préférerais une approche événementielle, je ne veux pas vérifier de nouveau l'état des cookies chaque milliseconde).

Localstorage a des événements auxquels vous pouvez vous abonner pour synchroniser d'autres pages.

Remarque: Si vous mettez à jour la valeur d'une clé dans la fenêtre A, l'événement ne sera pas déclenché dans la fenêtre A. Il sera déclenché dans Windows B & C.

Voici une démo: http://html5demos.com/storage-events

Ouvrez cette page dans plusieurs onglets. Changez la valeur sur l'entrée et voyez-la reflétée dans les divs.

Voici le code Le Javascript: 

var dataInput = document.getElementById('data'), output = document.getElementById('fromEvent'); // handle updates to the storage-event-test key in other windows addEvent(window, 'storage', function (event) { if (event.key == 'storage-event-test') { output.innerHTML = event.newValue; } }); // Update the storage-event-test key when the value on the input is changed addEvent(dataInput, 'keyup', function () { localStorage.setItem('storage-event-test', this.value); });

Marquage: 

 <div> <p>Your test data: <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(this is only echoed on <em>other</em> windows)</small></p> <p id="fromEvent">Waiting for data via <code>storage</code> event...</p> </div>

La spécification HTML 5 traite de toutes les informations transmises dans l'événement: 

 [Constructor(DOMString type, optional StorageEventInit eventInitDict)] interface StorageEvent : Event { readonly attribute DOMString key; readonly attribute DOMString? oldValue; readonly attribute DOMString? newValue; readonly attribute DOMString url; readonly attribute Storage? storageArea; }; dictionary StorageEventInit : EventInit { DOMString key; DOMString? oldValue; DOMString? newValue; DOMString url; Storage? storageArea; };

À partir de: http://www.w3.org/TR/webstorage/#the-storage-event

À l'aide de cet événement, vous pouvez réformer d'autres pages lorsqu'une clé spécifique dans le stockage local est mise à jour.

Donnez à SignalRamp une chance.

Vous pouvez attacher n'importe lequel des noms de classes pouvant être lié à des éléments pour synchroniser le mousedown correspondant, mouseup, hover (mouseover, mouseout) ou cliquez sur les événements dans l'interface utilisateur.