新标准中提供了文档之间直接的消息传输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. 160809228_符瑞艺_C语言程序设计实验3 循环结构程序设计

      #include <stdio.h> int main(){ //使用for循环完成1+2+......+100 ; ;i<=;i++) sum +=i; //sum = sum ...

  2. Caffe学习系列(9):solver优化方法

    介绍了各种优化算法 参考:http://www.cnblogs.com/denny402/p/5074212.html

  3. AJAX 页面数据传递

    $.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url: "personstockajax.php", //与 ...

  4. phpcms调用某个栏目下的所有二级栏目

    在html中直接这样调用就可以了,subcat中的值为父栏目的catid {loop subcat(93) $r}{/loop} 注意subcat方法的参数,如果只写一个参数,也就是父栏目id,那该父 ...

  5. 教程和工具--用wxPython编写GUI程序的

    wxPython是个很好的GUI库,对底层的C++库进行了封装,调用起来很方便,尤其是操作前台UI界面和后台多线程,两者配合很方便,做GUI程序最难是写界面尤其是布局. 关于wxPython,自己正在 ...

  6. 腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版

    腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版 时间:2015-01-18 01:41来源:linux.it.net.cn 作者:IT   #由于上文装过yum groupinstall ...

  7. poj 1789

    http://poj.org/problem?id=1789 这是一道图论的题,个人觉得和那个POJ1258是差不多的,就是多了一步,题目难以读懂 题目的意思:就是给你一群字符串要你找字符串对应的字符 ...

  8. VS2010调试速度很慢

    1.使用vs2010,感觉速度越来越慢.重新设置了vs2010的环境(在vs2010命令提示符下,执行devenv.exe /resetuserdata),居然解决了这个问题,速度跑的很好.网上有人说 ...

  9. Delphi 多步操作产生错误,请检查每一步的状态值

    需检查是否是以下这些情况: 1.  字段是不是精度不够. 2.  无主键 3.  字段允许为空 4.  字段类型不匹配 5.  ADO控件 CursorLocation的属性,默认值为"cl ...

  10. apache的httpd.conf翻译

    # This is the main Apache HTTP server configuration file. It contains the 这是Apache HTTP Server的主配置文件 ...