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>
  • 相关阅读:
    图像处理之理解卷积
    图像卷积与滤波的一些知识点
    利用SynchronizationContext.Current在线程间同步上下文
    C#基础之 --- 消息队列例子
    c#子线程与主线程之间的通信
    映美精相机软触发
    halcon例程学习笔记(11) 一维码、二维码识别
    C#的分布式消息队列介绍
    相似、仿射、射影变换区别
    配置管理
  • 原文地址:https://www.cnblogs.com/chengdabelief/p/6686070.html
Copyright © 2011-2022 走看看