*/

* Copyright (c) 2016，烟台大学计算机与控制工程学院

* All rights reserved.

* 文件名：text.html

* 作者：常轩

* 微信公众号：Worldhello

* 完成日期：2016年11月2日

* 版本号：V1.0

* 程序输入：无

* 程序输出：见运行结果

*/

Web 通信新技术 ——跨文档信息传输

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <!-- <meta http-equiv="refresh" content="5">-->

<title>postMessage子页面</title>

</head>

<body>

   <div>

        <p>接受来自:</p>

        <h1 id="h1"></h1>

        <p>的消息：</p>

        <h1 id="p_text"></h1>

    </div>

    <input  id="texts" type="text" name="textss">

    <script type="text/javascript">

        // 窗口事件监听：监听message

        window.addEventListener("message",function(e){

            var sts="123";

            // e.origin:发送消息的地址，谁发的消息就是谁的

            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据

            //if( e.origin != "" ){

           //     return;

          //  }

            document.getElementById("h1").innerHTML = e.origin;

            // e.data:发消息的内容

            document.getElementById("p_text").innerHTML = e.data;

            // 接收到消息后，在回过去，回个话；

            // 通过访问message的source的属性，来获取消息发送源的窗口对象，

            // 也就是能知道是谁发的消息，在通过postMessage，给发消息者回个话

            e.source.postMessage(sts,e.origin);

        },false);

    </script>

</body>

</html>

接收页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--    <meta http-equiv="refresh" content="5">-->

<title>postMessage主页面</title>

</head>

<body>

    <div>

        <p>接受来自:</p>

        <h1 id="h1"></h1>

        <p>的消息：</p>

        <h1 id="p_text"></h1>

    </div>

    <iframe width="500px" height="500px" id="iframe"

        src="http://1.aboutxuan.applinzi.com/test/test.html"

        onload="send()">

    </iframe>

    <script type="text/javascript">

        // 窗口事件监听：监听message

        window.addEventListener("message",function(e){

            // e.origin:发送消息的地址，谁发的消息就是谁的

            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据

            //if( e.origin != "http://www.aboutxuan.applinzi.com" ){

            //    return;

            //}

            document.getElementById("h1").innerHTML = e.origin;

            // e.data:发消息的内容

            document.getElementById("p_text").innerHTML = e.data;

        },false);

        // 发消息

        function send(){

            // 获取嵌入的iframe

            var iframe = window.frames[0],

                send_origin = document.getElementById("iframe").getAttribute("src");

            iframe.postMessage("我是父页面的消息",send_origin);

        }

    </script>

</body>

</html>

从自己想实现这一个功能到大体可以实现，花了点功夫。因为没有人带，所以走了些弯路。虽然现在只是有个雏形，不过还是有信心做出点东西的。加油！！！

Web 通信技术 ——跨文档信息传输(JavaScript)的更多相关文章

  1. web通信之跨文档通信 postMessage

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  2. HTML5跨文档消息传递

    HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web M ...

  3. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  4. 跨文档消息传递----postMessage()

    HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...

  5. HTML（六）HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  6. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  7. HTML5 跨文档消息传输

    对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...

  8. Web页面引入文档编辑器报风险

    Web页面引入文档编辑器会报风险,则需要以下操作: <system.web> <httpRuntime requestValidationMode="2.0" / ...

  9. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

随机推荐

  1. ubuntu或者raspbian清理软件使用痕迹

    拿最常用的nginx举例 删除nginx–purge包括配置文件 sudo apt-get --purge remove nginx 开始使用上面这条,后来发现还是有很多相关联没有删除 首先需要停止n ...

  2. OA项目-xadmin使用

    ###############  xadmin安装和配置   ############### """ 环境: Python3.6.3 django1.11.11 创建dj ...

  3. 谈谈有关 Python 的GIL 和 互斥锁

    转载:https://blog.csdn.net/Amberdreams/article/details/81274217 有 Python 开发经验的人也许听说过这样一句话:Python 不能充分利 ...

  4. 让java不再难懂

    废话不都说,直接上图哈 java基础思维导图整理.png 1.Java 简介.png 2.java主要特性.png 3.java发展历史.png 4.java 开发环境配置.png 5.java 基础 ...

  5. imageMso7345.rar

    本工具用于Office开发中的customUI设计,查询内置图标的工具. 解压后,有2个Excel文件. 第一个文件的动态图: 第2个文件也可以查询图标: 下载地址: imageMso7345.rar

  6. hibernate中lazy的使用

    lazy,延迟加载 Lazy的有效期:只有在session打开的时候才有效:session关闭后lazy就没效了. lazy策略可以用在: * <class>标签上:可以取值true/fa ...

  7. Win7如何查看nvidia显卡（GPU）的利用率

    1.在文件夹C:\Program Files\NVIDIA Corporation\NVSMI里找到文件nvidia-smi.exe2.把该文件拖到命令提示符窗口(win+R,再输入‘CMD’进入), ...

  8. Invalid action class configuration that references an unknown class问题原因之s:select

    早先做个练习项目就出现了这个错误,各种查资料,然后各种尝试,依然没有解决,不过可以确定是前台页面导致的. 今天又碰到了这个问题,头疼啊!不能再略过了,使用最笨的方法,一个模块一个模块的排除.先看下我的 ...

  9. 吴裕雄--天生自然操作系统操作笔记：window10显示隐藏文件夹

    基于安全考虑,操作系统会隐藏一些文件和文件夹,防止误删除操作.但有可能是个别人为了隐藏一些私密数据,也同样采取隐藏的方式.

  10. JavaScript 事件代理

    转自:http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html 如果你想给网页添加点JavaScript的交互性, ...