JavaScript 未触发消息事件

Question

我有一个带有 iframe 的简单 HTML5 页面，其 src 属性最初是空字符串。页面呈现时没有任何 JavaScript 错误。

iframe 元素的 src 属性仅在加载 window 时设置，因此最初加载一个空的 iframe。 iframe src 被设置为来自另一个域的页面。

我面临的问题是 postMessage 方法工作时不会抛出任何错误，但是源页面不会触发 message 事件，即使它是在 iframe 页面开始加载之前设置的.我正在显示来自 iframe 页面的警告消息，这意味着 postMessage 方法没有抛出任何错误。

问题

在源页面订阅消息事件时，我错过了什么？

源页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Cross domain iframe messaging</title>
    <script  src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script type="text/javascript">
            var iframec = null;

            window.addEventListener("load", function () {

                iframec = document.getElementById("iframec");

                //set up event listener for iframe object so it can receive message from page shown in iframe
                iframec.contentWindow.addEventListener("message", function (event) {
                    alert("received: " + event.data);
                }, false);

                //load the iframe page but after you have set up to receive messages
                iframec.src = "http://www.abcx.com";
            });
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <h1>Testing iframe messaging in a Cross Domain scenario</h1>
       <p> Trying to send a message to an iframe that comes from a page in another domain. The postMessage method does not throw an error when called from the other domain page, but it's not being received by the page having iframe element in it.</p>
      <div id="divComments"></div>
        <iframe src=""  id="iframec" name="iframec"  style="border:none;margin:0;padding:0;width:100%; "></iframe>
      </div>
    </form>
</body>
</html>

未引发任何错误的 Iframe 页面 JavaScript（即 http://www.abcx.com 处的页面）

<script>

      $( document ).ready(function() {

          alert("loaded the iframe page on another domain. Just before  postMessage");

          window.postMessage("Some message was sent from other domain message", "*");

          alert("loaded the iframe page on another domain. Just after postMessage");
});

</script>

Answer 1

您将侦听器连接到错误的 window，并使用错误的 window 发送消息。（这很容易出错。:-)）

在主 window 中，您想在主 window 上接收 message 事件，而不是 iframe，因此：

    window.addEventListener("message", function (event) {
//  ^^^^^^^
        alert("received: " + event.data);
    }, false);

在 iframe 中，您要发送到 window.parent（嗯，parent），而不是 window:

    parent.postMessage("Some message was sent from other domain message", "*");
//  ^^^^^^

通过这两项更改，iframe 发送的消息由主 window 接收。

Answer 2

我发现了一个类似的问题here

在您尝试加载的页面上，它应该使用 top.postMessage 或 parent.postMessage

此外，您应该将侦听器附加到 window，而不是 iframe（并确保过滤来源，否则 localhost 会给您一个误报）

这是我正在玩的你的版本：

<!DOCTYPE html>
<html>
<head>
<script  src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
        var iframec = null;

        window.addEventListener("load", function () {
            if(!iframec){
                iframec = document.getElementById("iframec");

                //set up event listener for iframe object so it can receive message from page shown in iframe
                window.addEventListener("message", function (event) {
                    if(event.origin == '[your domain here]') alert("received from " + event.origin + ": " + event.data);
                }, false);

                //load the iframe page but after you have set up to receive messages
                iframec.src = "[iframe target url]";
            }
        });
</script>

iframe 的目标：

<!DOCTYPE html>

<html>
<head>
 <script  src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
 <script>
   $( document ).ready(function() {
     alert('loaded the page. Just before  postMessage');
     top.postMessage("Some message was sent from appsprocure", "*");
     alert("loaded the page. Just after postMessage");
   });
 </script>
</head>
<body><h1>Hello!</h1></body>
</html>

JavaScript 未触发消息事件

JavaScript Message event not being fired

html

javascript

iframe

postmessage