2016-12-15 1 views
0

Ich habe ein iFrame mit einem Schatten dom:postmessage zu iFrame mit Schatten dom hat event.source Satz event.target in neueste Chrome

<iframe id="output-frame" src="http://localhost:8080/external/output.html" data-src="http://localhost:8080/external/output.html" style="height: 570px; width: 322px;"> 
    #document 
     <html>...</html> 
</iframe> 

ich einen Beitrag Nachricht an sie senden:

postFrameOrigin: function postFrameOrigin() { 
    var match = /^.*:\/\/[^\/]*/.exec(this.$el.find("#output-frame").attr("data-src")); 

    return match ? match[0] : window.location.protocol + "//" + window.location.host; 
}, 

postFrame: function postFrame(data) { 
    // Send the data to the frame using postMessage 
    this.$el.find("#output-frame")[0].contentWindow.postMessage(JSON.stringify(data), this.postFrameOrigin()); 
    // Here `postMessage` is called ... 
}, 

ich erhalte es im Schatten dom:

bind: function bind() { 
    // Handle messages coming in from the parent frame 
    window.addEventListener("message", this.handleMessage.bind(this), false); 
    // ... here `message` is received ... 
}, 

handleMessage: function handleMessage(event) { 
    var data; 

    this.frameSource = event.source; // event.source contains target (falsly?) 
    this.frameOrigin = event.origin; 

(...) 

in Firefox und in Chrome bis 52 Version ich die Quelle erhalten Objekt korrekt in event.source. Ab Version 53 enthält es das Zielobjekt, wie in event.target oder event.srcElement. (auch mit neueren Opern, wie sie Blink benutzen). Mit dieser Version ist Blink zu shadow dom V1 gewechselt. Es sieht so aus als ob es eine Verbindung gibt.

Ist das ein Fehler? Wenn nicht, wie kann ich dann auf das Quellobjekt zugreifen?

Antwort

1

Auf meiner Version von Chrome (v57) und Opera (v41) sind sie immer noch anders aus:

console.assert(event.source !== event.target) wird jede Ausnahme nicht erhöhen.

Auch, wenn ich verschiedene Namen in das Hauptfenster geben und mit dem Rahmenfenster:

var window.name = 'container' 
... 
<iframe name="frame" ...> 

... Ich kann sie in dem handleMessage() Rückruf sehen:

console.log(event.source.name) // = container 
console.log(event.target.name) // = frame 
Verwandte Themen