2016-12-15 5 views
0

У меня есть IFrame с тенью йотом:PostMessage в плавающий фрейм с тенью йотом имеет event.source набора для event.target в последнем 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> 

я отправить почтовое сообщение к нему:

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

я получаю это в теневом йот:

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. (также с недавними Операми, поскольку они используют Blink). Blink переключился на теневой dom V1 с этой версией. Похоже, что есть связь.

Это ошибка? Если нет, как я могу получить доступ к исходному объекту?

ответ

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 
Смежные вопросы