Ist in IE10 die postMessage-Nachricht mit Herkunftsort defekt?

Ich versuche, mich eine triviale postMessage Beispiel die Arbeit...

in IE10
zwischen den Fenstern/tabs (vs. iframes)
über Herkunft

Entfernen Sie eine dieser Bedingungen, und Dinge, die gut funktionieren 🙂

Aber soweit ich das beurteilen kann-zwischen-Fenster postMessage nur scheint zu funktionieren im IE10, wenn beide windows-share Ursprungs. (Gut, in der Tat -- und unheimlich -- das Verhalten ist etwas offener als das: zwei verschiedene Ursprünge, die gemeinsam eine host scheint zu funktionieren, auch).

Ist dies ein dokumentierter bug? Irgendwelche workarounds oder andere Ratschläge?

(Hinweis: Diese Frage berührt die Fragen, aber seine Antwort ist über IE8 und IE9 -- nicht 10)

Mehr details + Beispiel...

launcher-Seite demo

<!DOCTYPE html>
<html>
  <script>
    window.addEventListener("message", function(e){
      console.log("Received message: ", e);
    }, false);
  </script>
  <button onclick="window.open('http://jsbin.com/ameguj/1');">
    Open new window
  </button>
</html>

gestartet Seite demo

<!DOCTYPE html>
<html>
  <script>
    window.opener.postMessage("Ahoy!", "*");
  </script>
</html>

Diese Werke an: http://jsbin.com/ahuzir/1 - denn beide Seiten werden gehostet bei der same-origin - (jsbin.com). Bewegen sich aber die zweite Seite, sonst nirgends, und es nicht in IE10.

InformationsquelleAutor der Frage Bosh | 2013-04-26

59

Ich irrte, wenn ich das Zitat diese Antwort: es hat nicht wirklich funktioniert in IE10. Anscheinend Leute gefunden haben, nützlich für andere Gründe, also bin ich so dass es für die Nachwelt. Original-Antwort unten:

Erwähnenswert: der link in der Antwort, dass Sie im Zusammenhang mit Staaten, die postMessage ist nicht cross-origin für das separate Fenster in IE8 und IE9 -- aber es wurde auch geschrieben, im Jahr 2009, bevor IE10 kam. So würde ich nicht nehmen, dass als ein Hinweis darauf, dass es fest in IE10.

Als für postMessage selbst, http://caniuse.com/#feat=x-doc-messaging vor allem zeigt, dass es immer noch gebrochen IE10, das scheint zu passen mit Ihrer demo. Die caniuse Seite links zu dieser Artikeldie enthält eine sehr wichtige Zitat:

Internet Explorer 8+ teilweise unterstützt cross-document-messaging:
derzeit arbeitet mit iframes, aber nicht für neue windows. Internet Explorer
10, jedoch wird Unterstützung MessageChannel. Firefox unterstützt derzeit
cross-document-messaging, aber nicht MessageChannel.

So Ihre beste Wette ist wahrscheinlich eine MessageChannel basierenden Code, und fallback auf postMessage wenn das nicht vorhanden ist. Es wird nicht erhalten Sie IE8/IE9-Unterstützung, aber zumindest werde mit dem IE10.

Docs auf MessageChannel: http://msdn.microsoft.com/en-us/library/windows/apps/hh441303.aspx

InformationsquelleAutor der Antwort ShZ

Erstellen Sie eine proxy-Seite auf dem gleichen host wie launcher. Proxy-Seite hat eine iframe mit Quelle legen Sie auf remote-Seite. Cross-origin-postMessage funktioniert jetzt auch im IE10 wie so:

Remote-Seite verwendet window.parent.postMessage zum übergeben von Daten an die proxy-Seite. Wie diese verwendet iframes, es unterstützt IE10
Proxy-Seite verwendet window.opener.postMessage zum übergeben von Daten zurück zu launcher-Seite. Da dies auf dem gleichen Domäne - es gibt keine cross-origin-Probleme. Es kann auch direkt aufrufen Globale Methoden auf die launcher Seite, wenn Sie nicht möchten, verwenden Sie postMessage - zB. window.opener.someMethod(data)

Probe (alle URLs sind fictitous)

Launcher-Seite an http://example.com/launcher.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Test launcher page</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

    <script>
        function log(msg) {
            if (!msg) return;

            var logger = document.getElementById('logger');
            logger.value += msg + '\r\n';
        }            

        function toJson(obj) {
            return JSON.stringify(obj, null, 2);
        }

        function openProxy() {
            var url = 'proxy.htm';
            window.open(url, 'wdwProxy', 'location=no');
            log('Open proxy: ' + url);
        }

        window.addEventListener('message', function(e) {
            log('Received message: ' + toJson(e.data));
        }, false);
    </script>

    <button onclick="openProxy();">Open remote</button> <br/>
    <textarea cols="150" rows="20" id="logger"></textarea>

    </body>
</html>

Proxy-Seite an http://example.com/proxy.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Proxy page</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

    <script>
        function toJson(obj) {
            return JSON.stringify(obj, null, 2);
        }

        window.addEventListener('message', function(e) {
            console.log('Received message: ' + toJson(e.data));

            window.opener.postMessage(e.data, '*');
            window.close(self);
        }, false);
    </script>

    <iframe src="http://example.net/remote.htm" frameborder="0" height="300" width="500" marginheight="0" marginwidth="0" scrolling="auto"></iframe>

    </body>
</html>

Remote-Seite an http://example.net/remote.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Remote page</title>
        <link rel="stylesheet" href="/css/style.css" />
    </head>
    <body>

    <script>
        function remoteSubmit() {
            var data = {
                message: document.getElementById('msg').value
            };

            window.parent.postMessage(data, '*');
        }
    </script>

    <h2>Remote page</h2>

    <input type="text" id="msg" placeholder="Type a message" /><button onclick="remoteSubmit();">Close</button>

    </body>
</html>

InformationsquelleAutor der Antwort LyphTEC

Gebäude auf Antwort von tangle, ich hatte Erfolg im IE11 [und emuliert IE10-Modus] mit dem folgenden snippet:

var submitWindow = window.open("/", "processingWindow");
submitWindow.location.href = 'about:blank';
submitWindow.location.href = 'remotePage to comunicate with';

Dann war ich in der Lage zu kommunizieren mit den typischen postMessage stack, ich verwende eine Globale statische messenger in meinem Szenario (alotough ich glaube nicht, dass es jeder signifficance, ich befestige meine messenger-Klasse)

var messagingProvider = {
    _initialized: false,
    _currentHandler: null,

    _init: function () {
        var self = this;
        this._initialized = true;
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

        eventer(messageEvent, function (e) {
            var callback = self._currentHandler;
            if (callback != null) {
                var key = e.message ? "message" : "data";
                var data = e[key];
                callback(data);
            }
        }, false);
    },

    post: function (target, message) {
        target.postMessage(message, '*');
    },

    setListener: function (callback) {
        if (!this._initialized) {
            this._init();
        }

        this._currentHandler = callback;
    }
}

Egal wie sehr ich es versuchte, ich war nicht in der Lage, um die Dinge funktionieren auf IE9 und IE8

Meine config, wo es funktioniert:

IE-version: 11.0.10240.16590 -, Update-Versionen: 11.0.25 (KB3100773)

InformationsquelleAutor der Antwort Bruno Laurinec

2

Genau jetzt (2014-09-02), Ihre beste Wette ist, um einen proxy zu verwenden frame wie bereits in der msdn-Blogbeitrag, dass die details, die ein workaround für dieses Problem: https://blogs.msdn.microsoft.com/ieinternals/2009/09/15/html5-implementation-issues-in-ie8-and-later/

Hier ist das Beispiel: http://www.debugtheweb.com/test/xdm/origin/

Müssen Sie zum einrichten einer proxy-frame auf Ihrer Seite, hat den gleichen Ursprung wie das popup. Senden Sie Informationen aus dem popup an den proxy-Rahmen mit window.opener.frames[0]. Dann verwenden Sie postMessage von der proxy-frame auf der Hauptseite.

InformationsquelleAutor der Antwort Akrikos

Aufbauend auf den Antworten von LyphTEC und Akrikos, einen anderen work-around ist die Erstellung einer <iframe> in ein leeres popup-Fenster, die verhindert, die Notwendigkeit für eine separate proxy-Seite, da das leere popup hat den gleichen Ursprung wie seine opener.

Launcher-Seite an http://example.com/launcher.htm

<html>
  <head>
    <title>postMessage launcher</title>
    <script>
      function openWnd() {
        var w = window.open("", "theWnd", "resizeable,status,width=400,height=300"),
            i = w.document.createElement("iframe");

        i.src = "http://example.net/remote.htm";
        w.document.body.appendChild(i);

        w.addEventListener("message", function (e) {
          console.log("message from " + e.origin + ": " + e.data);

          //Send a message back to the source
          e.source.postMessage("reply", e.origin);
        });
      }
    </script>
  </head>
  <body>
    <h2>postMessage launcher</h2>
    <p><a href="javascript:openWnd();">click me</a></p>
  </body>
</html>

Remote-Seite an http://example.net/remote.htm

<html>
  <head>
    <title>postMessage remote</title>
    <script>
      window.addEventListener("message", function (e) {
        alert("message from " + e.origin + ": " + e.data);
      });

      //Send a message to the parent window every 5 seconds
      setInterval(function () {
        window.parent.postMessage("hello", "*");
      }, 5000);
    </script>
  </head>
  <body>
    <h2>postMessage remote</h2>
  </body>
</html>

Ich bin mir nicht sicher, wie zerbrechlich das ist, aber es funktioniert im IE 11 und Firefox 40.0.3.

InformationsquelleAutor der Antwort tangle

0

Diese Lösung beinhaltet das hinzufügen der Website für Internet Explorer - Vertrauenswürdige Sites und nicht in die Lokalen Intranet sites. Getestet habe ich diese Lösung in Windows 10/IE 11.0.10240.16384, Windows 10/Microsoft Rand 20.10240.16384.0 und Windows 7 SP1/IE 10.0.9200.17148. Die Seite muss nicht in der Intranet-Zone.

So öffnen Sie den Internet Explorer-Konfiguration (Extras > Internetoptionen > Sicherheit > Vertrauenswürdige Sites > Websites), und fügen Sie die Seite hier benutze ich * mit allen subdomains. Stellen Sie sicher, dass die Seite nicht aufgelistet in der Lokalen intranet-sites (Extras > Internetoptionen > Sicherheit > Lokales Intranet > Standorte > Erweitert). Starten Sie Ihren browser neu und testen Sie erneut.

In Windows 10/Microsoft Rand finden Sie diese Konfiguration in der Systemsteuerung > Internetoptionen.

UPDATE

Wenn dies nicht funktioniert, könnten Sie versuchen, das zurücksetzen werden alle Einstellungen in Extras > Internetoptionen - > Erweiterte Einstellungen - > Internet Explorer-Einstellungen Zurücksetzen und dann Reset: verwenden Sie es mit Vorsicht! Dann müssen Sie Ihr system neu starten. Danach fügen Sie die Websites zu den Vertrauenswürdigen sites.

Sehen, in welcher zone Ihre Seite in Datei - > Eigenschaften oder die Verwendung der rechten klicken Sie auf.

UPDATE

Ich bin in einem Firmen-intranet und manchmal klappt es und manchmal nicht (automatische Konfiguration? Ich habe sogar begonnen, die Schuld der corporate proxy). Am Ende habe ich diese Lösung https://stackoverflow.com/a/36630058/2692914.

InformationsquelleAutor der Antwort lmiguelmh
-2

MessageChannel-funktioniert nicht bei IE 9-11 zwischen den Fenstern/tabs, da es stützt sich auf postMessage, die ist immer noch kaputt in diesem Szenario. Die "beste" workaround ist der Aufruf einer Funktion durch das Fenster.opener (ie. Fenster.opener.somefunction("somedata") ).

Workaround im detail hier

InformationsquelleAutor der Antwort user1337489

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.