5

我有两个 HTML 文件。在一个 HTML 文件中，我使用postMessageHTML5 发布了一条消息。如何在加载时在另一个 HTML 文件中获取发布的消息？

一.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>

二.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>
4

3 回答 3

4

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

userWindow.postmessage(myMessage, targetOrigin);

这将发布myMessage到由 指向的窗口userWindow，该窗口具有targetOriginURI。如果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);
}

postMessageAPI 参考 - MDN

一个不错的教程

于 2013-08-05T10:25:19.093 回答
2

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

一.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>

二.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>
于 2013-08-05T10:23:06.450 回答
-2

您可以使用 HTML5 的 localStorage

localStorage.setItem("msgvariable", message);

并在另一个 html 页面上检索它

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

在这里查看实施

于 2013-08-05T09:40:36.383 回答