在最新的Chrome瀏覽器中，帶陰影dom的postMessage到iFrame的event.source設置為event.target

Question

我有一個帶陰影dom的iFrame：

<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>

我向其發送一個帖子：

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 ...
},

我在影子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;

(...)

在Firefox和Chrome中，直到版本52，我在event.source正確接收到源對象。 從版本53開始，它包含目標對象，與event.target或event.srcElement對象相同。 （也適用於最近的Opera，因為它們使用Blink）。 眨眼間切換到了該版本的影子dom V1。 看起來好像有連接。

這是錯誤嗎？ 如果沒有，我該如何訪問源對象？

Answer 1

在我的Chrome（v57）和Opera（v41）版本上，它們仍然不同：

console.assert( event.source !== event.target )不會引發任何異常。

另外，如果我給主窗口和框架窗口使用不同的名稱：

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

...我可以在handleMessage()回調中觀看它們：

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

在最新的Chrome瀏覽器中，帶陰影dom的postMessage到iFrame的event.source設置為event.target

問題描述

1 個解決方案

解決方案1
1 2016-12-17 22:55:07

在最新的Chrome瀏覽器中，帶陰影dom的postMessage到iFrame的event.source設置為event.target

問題描述

1 個解決方案

解決方案1 1 2016-12-17 22:55:07

解決方案1
1 2016-12-17 22:55:07