*/

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

* All rights reserved.

* 文件名：text.html

* 作者：常轩

* 微信公众号：Worldhello

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

* 版本号：V1.0

* 程序输入：无

* 程序输出：见运行结果

*/

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.    <!-- <meta http-equiv="refresh" content="5">-->
  6. <title>postMessage子页面</title>
  7. </head>
  8. <body>
  9.    <div>
  10.         <p>接受来自:</p>
  11.         <h1 id="h1"></h1>
  12.         <p>的消息：</p>
  13.         <h1 id="p_text"></h1>
  14.     </div>
  15.     <input  id="texts" type="text" name="textss">
  16.     <script type="text/javascript">
  17.         // 窗口事件监听：监听message
  18.         window.addEventListener("message",function(e){
  19.             var sts="123";
  20.             // e.origin:发送消息的地址，谁发的消息就是谁的
  21.             // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据
  22.             //if( e.origin != "" ){
  23.            //     return;
  24.           //  }
  25.             document.getElementById("h1").innerHTML = e.origin;
  26.             // e.data:发消息的内容
  27.             document.getElementById("p_text").innerHTML = e.data;
  28.             // 接收到消息后，在回过去，回个话；
  29.             // 通过访问message的source的属性，来获取消息发送源的窗口对象，
  30.             // 也就是能知道是谁发的消息，在通过postMessage，给发消息者回个话
  31.             e.source.postMessage(sts,e.origin);
  32.         },false);
  33.     </script>
  34.  
  35. </body>
  36. </html>

接收页面：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <!--    <meta http-equiv="refresh" content="5">-->
  6. <title>postMessage主页面</title>
  7. </head>
  8. <body>
  9.     <div>
  10.         <p>接受来自:</p>
  11.         <h1 id="h1"></h1>
  12.         <p>的消息：</p>
  13.         <h1 id="p_text"></h1>
  14.     </div>
  15.  
  16.     <iframe width="500px" height="500px" id="iframe"
  17.         src="http://1.aboutxuan.applinzi.com/test/test.html"
  18.         onload="send()">
  19.     </iframe>
  20.     <script type="text/javascript">
  21.         // 窗口事件监听：监听message
  22.         window.addEventListener("message",function(e){
  23.             // e.origin:发送消息的地址，谁发的消息就是谁的
  24.             // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据
  25.             //if( e.origin != "http://www.aboutxuan.applinzi.com" ){
  26.             //    return;
  27.             //}
  28.             document.getElementById("h1").innerHTML = e.origin;
  29.             // e.data:发消息的内容
  30.             document.getElementById("p_text").innerHTML = e.data;
  31.         },false);
  32.  
  33.         // 发消息
  34.         function send(){
  35.             // 获取嵌入的iframe
  36.             var iframe = window.frames[0],
  37.                 send_origin = document.getElementById("iframe").getAttribute("src");
  38.             iframe.postMessage("我是父页面的消息",send_origin);
  39.         }
  40.     </script>
  41. </body>
  42. </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. ElasticSearch 分组查询

    curl -XPOST 'localhost:9200/bank/_search?pretty' -d ' { "size": 0, "aggs": { &qu ...

  2. Opencv笔记（四）——绘图函数

    常用的绘图函数有: cv2.line()       cv2.circle()        cv2.rectangle()      cv2.ellipse()       cv2.putText( ...

  3. Angular开发者指南（三）数据绑定

    数据绑定 AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源. 视图是模型在任何时候的投影. 当模型更 ...

  4. MySQL安装教程及Navicat连接MySQL报错：1251-Client does not support authentication protocol requested by server

    MySQL安装可参考: MySql 8.0.18安装 此参考文章后面涉及到的密码修改,对本标题碰到的错误同样适用. 本文先讲如何安装,在讲碰到的1251问题.要直接看解决方案的朋友可以直接通过目录链接 ...

  5. Eclipse中配置使用本地schema或dtd文件

    问题:在设备不能正常联网的情况下,无法获取到网络上的 dtd 或 schema,编写配置文件的 XML 文档就没有了提示功能. 一般情况下,下载的 Jar 包或者 Zip 包中都会包含需要的 sche ...

  6. springboot支付项目之日志配置

    日志框架 本节主要内容: 1:常见的几种日志框架 2:Logback的使用 3:怎么配置info和error级别日志到不同文件中并且按照日期每天一个文件. 以上几个框架可以分类如下: SLF4J和Lo ...

  7. Jarque-Bera test|pp图|K-S检验|

    Jarque-Bera test: 如何绘制pp图?   找该直线的截距和斜率,通过截距和斜率的值找到正态参数均值和方差,可对这些正态参数进行正态检验. K-S检验的的特点? 并不是只针对正态分布,是 ...

  8. 《C Prime Plus》第八节笔记

    第八节 字符输入/输出和输入验证 8.1 单字符I/O:getchar()和putchar() getchar()和putchar()包含在stdio.h头文件中 8.2 缓冲区 无缓冲输入: 直接回 ...

  9. SpringBoot常见面试题

    什么是SpringBootSpringBoot的作用SpringBoot的优点SpringBoot的核心配置文件是什么,有何区别?SpringBoot的配置文件有几种格式,区别是什么?SpringBo ...

  10. 实例理解scala 隐式转换(隐式值，隐式方法，隐式类)

    作用 简单说,隐式转换就是:当Scala编译器进行类型匹配时,如果找不到合适的候选,那么隐式转化提供了另外一种途径来告诉编译器如何将当前的类型转换成预期类型.话不多说,直接测试 ImplicitHel ...