One.html

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <script language="javascript">
            $(document).ready(function() {
                //post message
                var iframeWin = document.getElementById("iframe_id").contentWindow;
                iframeWin.postMessage("helloooo");
            });
        </script>

        <title>IFrame Example</title>
    </head>
    <body>
        <input id="myInput" type="hidden" value="IDDUSER">

        <iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe>
    </body>
</html>

Two.html

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <script language="javascript">
            $(document).ready(function() {
                //Get posted message here
            });
        </script>

        <title>IFrame Child Example</title>
    </head>

    <body>
        <p id="received-message">I've heard nothing yet</p>
        <h1>Iframe</h1>
    </body>
</html>

Answer 1

HTML5 postMessage() API方法的语法如下：

userWindow.postmessage(myMessage, targetOrigin);

这会将myMessage发布到userWindow指向的窗口，该窗口有targetOrigin个URI。如果userWindow引用匹配，但targetOrigin与其URI不匹配，则该邮件将不会发布。

在目标窗口userWindow中，您可以收听message事件。

window.addEventListener('message', handlerFunction, captureBubble);

例如，如果您在myWindow变量中有窗口引用，那么在源代码...

拨打

myWindow.postMessage('this is a message', 'http://www.otherdomain.com/');

回调处理

window.addEventListener("message", receiveMessage, false); function receiveMessage(event){ if (event.origin !== 'http://www.otherdomain.com/') return; // this check is neccessary // because the `message` handler accepts messages from any URI console.log('received response: ',event.data); }

并且目标......

消息处理程序

window.addEventListener("message", receiveMessage, false); function receiveMessage(event){ if (event.origin !== 'http://www.callingdomain.com/') return; console.log('received message: ',event.data); event.source.postMessage('this is response.',event.origin); }

<强> postMessage API Reference - MDN

<强> A nice tutorial

Answer 2

您必须在子iframe中的message对象上侦听window事件。此外，postMessage需要2个参数，消息＆amp;域。

One.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script language="javascript">
      $(document).ready(function() {
        $('#clickMe').click(function() {
          //post message
          var iframeWin = document.getElementById("iframe_id").contentWindow;
          iframeWin.postMessage("helloooo","*");
        });
      });
    </script>

    <title>IFrame Example</title>
  </head>
  <body>
    <input id="myInput" type="hidden" value="IDDUSER">
    <button id="clickMe">Click Me</button>

    <iframe name="iframe" id="iframe_id" src="Two.html" height="150"></iframe>
  </body>
</html>

Two.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script language="javascript">
      $(document).ready(function() {
        $(window).on('message', function(evt) {
          $('#received-message').html(evt.originalEvent.data);
        });
      });
    </script>

    <title>IFrame Child Example</title>
  </head>

  <body>
    <p id="received-message">I've heard nothing yet</p>
    <h1>Iframe</h1>
  </body>
</html>

Answer 3

您可以使用HTML5的localStorage，例如

localStorage.setItem("msgvariable", message);

并在另一个html页面上检索

var retrivedMsg = localStorage.getItem("msgvariable");

查看实施HERE

如何检索使用HTML5的postMessage发布的数据？

One.html

Two.html

3 个答案:

One.html

Two.html