新标准中提供了文档之间直接的消息传输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. Android活动的生命周期

    掌握活动的生命周期对任何Android开发者来说都非常重要,当你深入理解活动的生命周期之后,就可以写出更加连贯流畅的程序. -------------------------------------- ...

  2. Kali Linux渗透基础知识整理（二）漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  3. Python自动化之线程进阶篇（二）

    queue队列 class queue.Queue(maxsize=0) #先入先出 class queue.LifoQueue(maxsize=0) #后入先出 class queue.Priori ...

  4. idea让字体更圆滑

    个人用myeclipse习惯了, 转战idea 觉得自己看题来很方很死板的样子. 然后更换了其字体,如果喜欢你可以试试. 点击file --> setting.. --> 把编辑的字体改成 ...

  5. 一致性哈希算法以及其PHP实现

    在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括:  轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法(Respons ...

  6. Git打包文件

    原文: http://gitbook.liuhui998.com/7_5.html 一.打包文件索引 首先, 我们来看一下打包文件索引, 基本上它只是一系列指向打包文件内位置的书签. 打包文件索引有两 ...

  7. centos6.5 mysql开机启动

    可参考:centos6.5 nginx开机启动 /etc/init.d/下添加mysqld文件,内容如下: #!/bin/sh # Copyright Abandoned TCX DataKonsul ...

  8. Python批量修改文件名-后缀

    LyncLynn用途: 批量修改文件格式,文件名后缀. #Version: V1.0 #Author:lynclynn #Description:Change the filename #Create ...

  9. GIT简单操作

    以下只是简单的bash的操作命令,个人比较喜欢用gui 打开 git bash here git clone https://github.com/自己的名字/trunk git checkout + ...

  10. nyoj1000_快速幂_费马小定理

    又见斐波那契数列 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 斐波那契数列大家应该很熟悉了吧.下面给大家引入一种新的斐波那契数列:M斐波那契数列. M斐波那契数列 ...