无法获取 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

无法获取 MessageEvent 属性

Can't get MessageEvent properties

javascript

postmessage