新标准中提供了文档之间直接的消息传输API。而且不限制跨域消息传递！
发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了，但给哪个window对象发送消息，就使用哪个window的实例来调用，注意这个细节。
文档默认监听一下message事件就可以接受消息了：window.addEventListener("message", function (ev) {});
监听消息事件：ev两个重要属性：ev.source指向发送消息的源window对象，ev.data来获取收到的消息数据
<!DOCTYPE html>

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

<head>

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

    <title></title>

      <script>

          window.onload = function() {

              document.getElementById("btn").onclick = function() {

                  document.getElementById("f").contentWindow.postMessage(document.getElementById("t").value, "*");

              };

          };

    </script>

</head>

<body>

    <input id="t" type="text" />

    <input id="btn" type="button" />

    <iframe id="f" src="receiveMsg.html" ></iframe>

</body>

</html>
<!DOCTYPE html>

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

<head>

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

    <title></title>

    <script type="text/javascript">

        window.onmessage = function (event) {

            //event.data  数据  event.origin 消息来源地址  event.source   源DOMWindow 对象

            alert(event.data);

            alert(event.origin);

            alert(event.source);

        }

    </script>

</head>

<body>

</body>

</html>

HTML5学习之跨文档传输消息（七）的更多相关文章

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

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

  2. HTML5 跨文档消息传输

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

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

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

  4. HTML5跨文档消息传递

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

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

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

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

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

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

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

  8. Web 通信技术 ——跨文档信息传输(JavaScript)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

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

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

随机推荐

  1. 【转】UML类图几种关系的总结

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  2. JavaScript深入浅出4-对象

    慕课网教程视频地址:Javascript深入浅出 对象的结构:包含一系列无序的属性,每个属性都有字符串key和对应的值 创建对象:对象字面量.new/原型链.Object.create 对象的属性操作 ...

  3. ZUI前段框架简介

    一.说明 基于Bootstrap定制 ZUI继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的,一些组件都进行了定制和修改.这些变化包括: 移除了部分插件的限制,增加 ...

  4. 架构Android App总结

    历时两个多月,自己架构的一个App快要完成了,有很多可以总结的地方: 1, 各个模块尽可能独立,不要直接调用,用消息机制解耦.包括页面跳转不要直接startActivity,而是用消息跳转:业务模块请 ...

  5. CookieStore之Cookie的获取与保存

    Set<Cookie> allCookies = driver.manage().getCookies(); try { CookieStore cookiestore = new Bas ...

  6. MySQL用法

    查询数据库表 通过查询INFORMATION_SCHEMA.TABLES查询数据库表的结构信息 SELECT  *  FROM  INFORMATION_SCHEMA.TABLES WHERE TAB ...

  7. 修改apache上传文件大小限制

    PHP上传文件大小限制解决方法: 第一: 在php.ini里面查看如下行: upload_max_filesize = 8M    post_max_size = 10M    memory_limi ...

  8. PHP-FPM的常用操作

    PHP-FPM安装完毕之后,没有自带的结束命令,可以通过以下方法结束: 1.首先查看PHP-FPM进程号: ps -ef | grep php-fpm 可以看到master进程号为91790,有两个子 ...

  9. Linux基础命令总结

    1.pwd  查看当前工作目录 2.ls [目录] 列出指定目录下的所有文件,使用 ls -l 或者 ll 列出文件详细列表包括权限.大小等文件默认大小以字节B为单位,目录大小为4096B  ls - ...

  10. Kafka单机环境部署

    前面说过Kafka集群环境的部署,现在主要说一下在本地测试中Kafka单机环境的部署,和前面一样首先保证zookeeper服务的正常运行,然后解压并释放kafka安装包,并放到指定位置: tar -x ...