Question

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

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

我面临的问题是postMessage方法可以正常运行而不会抛出任何错误，但是即使在iframe页面开始加载之前设置了message事件，源页面也不会触发<!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页面的警报消息，这意味着postMessage方法没有抛出任何错误。

问题

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

来源页面

http://www.abcx.com

没有引发任何错误的iframe页面JavaScript （即<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>处的页面）

NNLS

Answer 1

您在错误的窗口上连接监听器，并使用错误的窗口发送消息。（这很容易出错。:-)）

在主窗口中，您希望在主窗口而非iframe上接收message个事件，因此：

    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发送的消息将由主窗口接收。

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消息事件未被触发

2 个答案: