H5 postMessage跨文档消息传递

张哥编程

发布于 2024-12-17 02:06:29

11200

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

父页面

<!DOCTYPE html>
<html>
  <frameset cols="40%,60%">
    <frame src="a.html" />
    <frame src="b.html" />
  </frameset>
</html>

包含的两个子页面a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <form>
      <input type="text" required="required" autofocus="autofocus" /><br />
      <input type="submit" value="提交" id="btn"/>
    </form>
    <script>
      $("#btn").click(function(){
        var message=$("input[type='text']").val();
        window.parent.frames[1].postMessage(message,'*');
      });
    </script>
  </body>
</html>

包含b.html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <div id="message">尚未收到消息哦</div>
    <script>
      var msgHandle=function(e){
        $("#message").html("信息："+e.data);
      }
      if(window.addEventListener){
        window.addEventListener("message",msgHandle,false);
      }else if(window.attachEvent){
        window.attachEvent('onmessage',msgHandle);
      }
    </script>
  </body>
</html>