はMessageEventの性質

Question

window.addEventListener('message', function (message) { 
     console.log(message.data) // undefined 
} 

---

window.addEventListener('message', function (message) { 
     var myMessage = message 
     console.log(myMessage.data) // 'success get data' 
} 

を取得できませんか？

Answer 1

iFramesの間で通信する場合は、次のメッセージsendが必要です。

iframe.postMessage(message, '*'); 

iFrames間の正常な通信は以下のとおりです。

//Send message to the iFrame 
 
window.send = function() { 
 
    var iframe = document.getElementById('jsfiddle-frame').contentWindow; 
 
    var message = document.querySelector('#textOutput').value; 
 
    iframe.postMessage(message, '*'); 
 
} 
 

 
//Listen into the messages from the iFrame 
 
window.addEventListener('message', function(event) { 
 
    document.querySelector('#textOutput').value = event.data; 
 
}, false);

<div> 
 
    <h3> 
 
    Source 
 
    </h3> 
 
    <div class="output"> 
 
    <textarea id='textOutput' rows="7" placeholder="Enter text and send..."></textarea> 
 
    <button onclick="send()"> 
 
     Send 
 
    </button> 
 
    </div> 
 
</div> 
 
<hr> 
 
<h3> 
 
    Target iFrame 
 
</h3> 
 
<iframe width="100%" height="300" id="jsfiddle-frame" src="//fiddle.jshell.net/lowrey/56cwafg5/5/show/light/" frameborder="0"></iframe>

とiframe、

var parent = null; 
window.send = function() { 
    if (parent) { 
    var message = document.querySelector('#textOutput').value; 
    parent.postMessage(message, '*'); 
    } 
} 

window.addEventListener('message', function(event) { 
    parent = event.source; 
    document.querySelector('#textOutput').value = event.data; 
}, false); 

内のターゲットiFrameの完全なソースコードはここで見つけることができます。
http://fiddle.jshell.net/lowrey/56cwafg5/?utm_source=website&utm_medium=embed&utm_campaign=56cwafg5