JavaScript; Kommunikation zwischen Registerkarten/Fenstern mit gleichem Ursprung [Duplikat

Question

Diese Frage hat hier bereits eine Antwort:

• Kommunikation zwischen Registerkarten oder Fenstern 9 Antworten

Ich habe zwei Fenster: Fenster A und Fenster B.

• Fenster A und Fenster B haben die gleiche Domain
• Fenster A und Fenster B haben kein übergeordnetes Fenster.

Fragen:

1. Ist es möglich, dass Fenster A eine Referenz von Fenster B erhalten kann?
2. Was ist der eleganteste Weg, um Fenster zu Fenster zu Fenster B zu informieren?
   (einschließlich neuer HTML5 -Spezifikationen)

Zwei Möglichkeiten, die mir dessen bewusst bin:

• Messaging by Server: Wo das Fenster B -Regulary den Server fragt, ob das Fenster A etwas benachrichtigt hat
• Messaging nach lokalen Daten (HTML5): Wenn das Fenster A etwas benachrichtigen möchte, ändert es die lokalen Daten, überprüft das Fenster B Regulary die lokalen Daten auf Änderungen.

Aber die beiden Möglichkeiten sind nicht so elegant.
Zum Beispiel wäre es schön, eine Referenz von Fenster B zu erhalten und Fenster zu verwenden.postMessage () (HTML5)

Das ultimative Ziel ist es, so etwas wie Facebook zu erstellen. Wenn Sie 4 Facebook -Registerkarten öffnen und in einer Registerkarte chatten, ist der Chat in jeder Facebook -Registerkarte auf dem neuesten Stand, was ordentlich ist!

Answer 1

Ich halte mich an der gemeinsam genutzten lokalen Datenlösung, die in der Frage verwendet wird localStorage. Es scheint die beste Lösung in Bezug auf Zuverlässigkeit, Leistung und Browserkompatibilität zu sein.

localStorage wird in allen modernen Browsern implementiert.

Das storage Ereignis feuert wenn Sonstiges Registerkarten führen Änderungen an localStorage. Dies ist für Kommunikationszwecke ziemlich praktisch.

Referenzen finden Sie hier:
Webstorage
Webstorage - Speicherereignis

Answer 2

Mit dem Sender -Channel -Standard können dies dies tun. Im Moment wird es in Firefox und Chrome (implementiertkann ich benutzen, mdn):

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});

Answer 3

Sharedworker ist die Whatwg/ HTML5 -Spezifikation für einen gemeinsamen Prozess, der zwischen Registerkarten kommunizieren kann.

Answer 4

Du hast deine gesagt:

Das utlimate -Ziel ist es, so etwas wie Facebook zu erstellen. Wenn Sie 4 Facebook -Registerkarten öffnen und in einer Registerkarte chatten, wird der Chat auf jeder Facebook -Registerkarte verwirklicht. Wich ist ordentlich!

Dies sollte als Nebenprodukt Ihres Designs geschehen. Warum sollten Sie sich darum kümmern, wenn Sie sich nicht mit der Übertragung großer Datenmengen befassen? Es scheint, als würde es die Dinge ohne großen Gewinn komplizieren.

Vor Jahren fand ich das, wenn ich es tat window.open Mit dem Namen eines vorhandenen Fensters und einer leeren URL habe ich einen Hinweis auf das vorhandene Fenster erhalten (dieses Verhalten ist gerade auf MDC dokumentiert und ein Kommentar zu Die MSDN -Dokumente schlägt vor, dass es auch in IE funktioniert). Aber das war vor Jahren, ich weiß nicht, wie universell die Unterstützung für sie in der heutigen Welt ist, und natürlich haben Sie keinen Fensternamen, nach dem Sie suchen können, es sei denn, alle Ihre Fenster enthalten einen Namen iframe Für die Kommunikation, einzigartig über den serverseitigen Code benannt und dann mit dem serverseitigen Code dem anderen Fenster mitgeteilt werden ... (gruseliger Gedanke: Das könnte tatsächlich machbar sein. Speichern Sie die "aktuellen" Fensternamen, die sich auf eine protokollierte Art beziehen. Geben Sie in einer Tabelle in einer Tabelle ein neues Fenster an, das erstellt hat, das sich in dieses Konto anmeldet, alte inaktive Einträge aufnehmen. Wenn die Liste jedoch etwas veraltet ist, öffnen Sie neue Fenster, wenn Sie nach anderen suchen ... und ich BET -Unterstützung ist von Browser zum Browser zweifelhaft.)

Answer 5

Neben dem bevorstehenden Sharedworker, Sie können auch verwenden Cross-Dokument-Nachrichten, was viel größer ist unterstützt. In diesem Szenario muss es ein Hauptfenster geben, das für das Öffnen aller anderen Fenster mit verantwortlich ist window.open. Die untergeordneten Fenster können dann verwenden POST-Meldung auf ihrem window.opener.

Wenn die Verwendung von Flash eine Option für Sie ist, gibt es auch die viel älter Lokalkonnektion praktisch unterstützt auf jedem Client mit installiertem Flash (Beispielcode).

Andere Fallbacks -Methoden:
Postmessage -Plugin für JQuery with window.location.href Fallback für ältere Browser
Cookie-basierte Lösung für nicht-instantierte Kommunikation

Answer 6

Afaik, es ist unmöglich, über Windows zu kommunizieren, wenn sie nicht denselben Elternteil haben.

Wenn beide aus einem übergeordneten Fenster geöffnet wurden, sollten Sie in der Lage sein, die variablen Referenzen des Elternteils zu erhalten.

Öffnen Sie bei den übergeordneten Fenstern die Fenster wie diese:

childA = window.open(...);
childB = window.open(...)

In Childa greifen Sie auf ein Kind wie dieses aus:

childB = window.opener.childA

Answer 7

Ich habe eine nette Möglichkeit, einen solchen Trick zu machen, aber mit Einschränkungen: Sie sollten Popups für Ihre Domain zulassen, und Sie erhalten eine Seite immer geöffnet (als Registerkarte oder als Popup), die die Kommunikation zwischen Windows implementiert.

Hier ist ein Beispiel:http://test.gwpanel.org/test/page_one.html(Aktualisieren Sie die Seite, nachdem Sie Popups für die Domäne aktiviert haben)

Das Hauptmerkmal dieses Tricks - Popup wird am Ende mit URL -Fragment '#' geöffnet. Dieser Kraftbrowser ändert nicht alle Daten. Und Window.PostMessage machen den Rest.