PostMessage mit mehreren Funktionen oder benutzerdefinierte callbacks

Bisher habe ich nur tutorials für postmessage, wo ein Fenster sendet eine einzelne Art von Nachricht, und die anderen Fenster interpretiert die Nachricht nur in einem einzigen Weg.

Was ist, wenn ich will, um viele verschiedene Arten von Wechselwirkungen zwischen windows, kann postmessage Griff?

Ist, geht gegen den Strich, was postmessage machen soll?

Was zum Beispiel, wenn ich wollte in der Lage sein zu senden, benutzerdefinierte callbacks hin und her, etc?

InformationsquelleAutor der Frage johnnietheblack | 2011-12-12

  1. 51

    Gibt es ein paar Möglichkeiten, um pass-a multi-part message auf einem postMessage handler. Die erste (und weniger "sauber") ist zu verwenden ein Trennzeichen, dann übergeben Sie Ihre Daten über einen string.

    Sagen wir, wir wollten, passieren Sie eine Benutzer-ID, eine Aktion, und der Benutzer-name. Der string würde wie folgt Aussehen:

    54|do_logout|chris

    Innerhalb der postMessage - handler, der die Daten übergeben werden können split (docs) auf der | Charakter, dann wird jedes segment der Nachricht kann bei Bedarf eingesetzt werden.

    Anderen Weg, statt manuell anlegen/aufteilen einer Zeichenfolge, ist die Verwendung von JSON (docs) zum konvertieren eines Objekts in eine Zeichenkette auf der einen Seite, und verwenden Sie JSON zu konvertieren zurück zu einem Objekt in der Prozedur.

    var pass_data = {
    'name':'Chris',
    'id':54,
    'action':'do_logout'
};
target_window.postMessage(JSON.stringify(pass_data), "http://www.example.net");

    ... dann in der Prozedur:

    function (event) {
    var pass_data = JSON.parse(event.data);
}

    Sicher sein, zu testen, obwohl, wie die JSON - Objekt ist nicht bereitgestellt, die auf allen user-agents, vor allem ältere. Es gibt viele (viele, viele Drittanbieter-Bibliotheken gibt, um shim JSON-Unterstützung, so lassen Sie sich nicht das fehlen vollständiger Annahme erschrecken Sie Weg - JSON ist definitiv eine sichere "moving forward" - standard.

    Wäre es nicht schöner, wenn wir könnten nur passieren, dass das Objekt auf Anhieb? Gut, starrte in Firefox 6 (Quelle), die Daten, die Sie übergeben, um eine postmessage-handler kann ein Objekt sein. Das Objekt wird serialisiert werden, so gibt es einige Bedenken auf, die vor, aber:

    var pass_data = {
    'name':'Chris',
    'id':54,
    'action':'do_logout'
};
target_window.postMessage(pass_data, "http://www.example.net");

    Ein bisschen schöner, gell? Leider sind die aktuellen Versionen von Internet Explorer wird nur mit strings. Ich war nicht in der Lage zu finden, jede Diskussion über die künftigen Pläne in Bezug auf postMessage für den IE 10. Des weiteren gibt es einen bekannten bug in IE 8/9, bricht postMessage für etwas anderes als frames. (Quelle).

    Immer in einem bestimmten Aspekt Ihrer Frage - Rückrufe. Es sei denn, Sie sind in der Lage, übergeben, die callback-Funktion name, gibt es nicht eine Methode zum übergeben einer Funktion; keine anonymen Funktionen für Sie. Dies ist in Bezug auf die Art und Weise die Daten tatsächlich an den handler. In der Praxis gibt es "nicht" - Unterstützung für Objekte wie Daten, hinter die kulissen der browser wendet Ihr das übergebene Objekt in einen string (Serialisierung).

    Alles, was gesagt, dann sollten Sie verstehen, dass Sie ein Objekt ist genau das gleiche wie mit JSON zu stringify ein Objekt vor der übergabe, nur im ersten Fall die browser-eigene Serialisierung (und die anschließende unserialization), während bei den letzteren Weg es ist bis zu Ihnen, um serialize/unserialize.

    Den take-away-Punkte hier:

    • postMessage noch begrenzte cross-browser-Unterstützung
    • Den trend für die neueren Versionen von Standard-konformen Browser sind, um den Durchgang von Objekten zusätzlich zu strings
    • Das übergebene Objekt wird serialisiert werden, so dass keine Funktion Referenzen erlaubt
    • Die breiteste Unterstützung "in der wildnis" ist für string-Daten, was bedeutet, dass Sie haben zu stick mit Streichern und "pack" für Ihre Daten, wie oben dargelegt, wenn Sie wollen, unterstützen eine Vielzahl von user-agents
    • Internet Explorer ruiniert jeden plan, die Sie jemals machen werden (einschließlich der Ferien mit der Familie)

    Dokumentation und Referenzen

    InformationsquelleAutor der Antwort Chris Baker

  2. 3

    Rückrufe mit postMessage: sehr gut möglich und sehr nützlich

    Gibt es ein nettes plugin, das ich gefunden habe, auf npm als "Silber-Kugel". Es tut postMessage mit callbacks und Verwendungen, von eventEmitter bestimmte Ereignisse als gut. Seine sehr schön.

    Aber um dies zu implementieren, ich würde so etwas tun...

    phostMessage(iframe, someObj, callback);

    Haben Sie, um dies zu tun:

    1. Sie brauchen eine gemeinsame callback ID bestanden zwischen den Bildern zu kommunizieren.
    2. Die Absender erstellt eine eindeutige Rückruf-ID auf jede Nachricht und speichert Sie in einer callback-lookup hash zu finden, der Rückruf nach Absenden.
    3. Die Empfänger der Nachricht nur dafür sorgt, dass die callback-ID zurück geschickt.
    4. Alle frames der Kommunikation verwenden Sie die gleiche JS-Bibliothek für diesen.

    Hier ist eine sehr einfache demonstration:

    var callbacks = {};

//when receiving messages
window.addEventListener('message', function(ev) {
  //todo: add origin check
  if (!ev.data)
    return;

  var message;
  try {
    message = JSON.parse(ev.data);
  } catch (ex) {
    console.error(ex);
  }

  //ignore messages not having a callback ID
  if (!message || !message.callbackId)
    return;

  //we are the sender getting the callback
  if (callbacks[message.callbackId]) {
    callbacks[message.callbackId](message);
    delete callbacks[message.callbackId];
    return;
  }

  //we are the receiver so we respond with the callback ID
  //todo: restrict who can receive message (last param)
  iframe.contentWindow.postMessage(JSON.stringify(message), '*');
});

//when sending messages
function phostMessage(iframe, obj, callback) {
  obj.eventId = Math.random();
  callbacks[obj.eventId] = callback;
  //todo: restrict who can receive message (last param)
  iframe.contentWindow.postMessage(JSON.stringify(obj), '*');
}

    Nehme ich das Konzept ein bisschen weiter und verwenden Sie eine message-handler-lookup, wo die Nachricht den gewünschten handler-Funktion namens zu wecken und eine Botschaft zu. Der message-handler callback sowie, wenn Sie abgeschlossen feuert den Rückruf. Der Rückruf hat gerade die einfache Logik der Aufruf der nativen post-Nachricht erneut senden zurück seiner erhaltenen callback-id.

    Also der letzten Zeile des Codes für die Nachricht event-handling wäre:

    if (messageHandler[message.handler])
  messageHandler[message.handler](message, function() {
    iframe.contentWindow.postMessage(JSON.stringify(message), '*');
  });
else
  iframe.contentWindow.postMessage(JSON.stringify(message), '*');

    die asynchrone Sachen passieren.

    InformationsquelleAutor der Antwort Jason Sebring

  3. 1

    Einen ziemlich einfachen Weg, um trigger Rückrufe, ohne jede eigentliche code wäre:

    Ziel

    var callbacks = {
  myCallback: function() { doSomething(); }
};
window.addEventListener('message', function (ev) {
  //origin checking etc
  callbacks[ev.data]();
}, false);

    Quelle

    target.postMessage('myCallback', 'http://www.example.com');

    InformationsquelleAutor der Antwort Jacob R

Schreibe einen Kommentar