zoukankan      html  css  js  c++  java
  • web通信之跨文档通信 postMessage

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>web通信之跨文档通信</title>
    <style>
    iframe {float:left;width:45%; height:200px; border:1px solid #333;}
    </style>
    </head>
    <body>
    <div id="main">
        <h1>web通信之跨文档通信</h1>
        <iframe src="iframe1.html"></iframe>
        <iframe src="iframe2.html"></iframe>
    </div>
    </body>
    </html>

    iframe1.html

    <!DOCTYPE html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试iframe</title>
    </head>
    <body>
    <div>
        <form>
            <input type="text"  placeholder="随便写点什么"/>
            <input type="submit" value="确认" />       
        </form>
    </div>
    <script>
    var eleForm = document.querySelector("form");
    eleForm.onsubmit = function() {
        var message = document.querySelector("input[type='text']").value;
        window.parent.frames[1].postMessage(message, '*');
        return false;    
    }
    </script>
    </body>
    </html>

    iframe2

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试iframe</title>
    <style>
    </style>
    </head>
    <body>
    <div id="message">
        尚未接受到信息。
    </div>
    <script>
    var eleBox = document.querySelector("#message");
    var messageHandle = function(e) {
        eleBox.innerHTML = '接受到的信息是:' + e.data;
    };
    window.addEventListener("message", messageHandle, false);
    </script>
    </body>
    </html>
  • 相关阅读:
    C# 5注释
    C# 4关键字
    C# 3练习题
    python之子类调用父类的同名属性和方法
    python之继承
    python之对象删除和输出
    python之r,w,a
    python之类中的方法和属性
    python之面向对象
    python之os对文件的操作
  • 原文地址:https://www.cnblogs.com/chengdabelief/p/6686070.html
Copyright © 2011-2022 走看看