新标准中提供了文档之间直接的消息传输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. 使用EasyBCD完美实现Windows7与Linux双系统

    在Linux横行的时代,不玩Linux简直对不起它的流行,但又不能不用Windows,还要干活,还要工作啊,最重要的是:还要娱乐啊!! 废话不多说,直接进入主题! 1.下载EasyBCD,这个软件可以 ...

  2. git 教程(10)--添加远程库

    现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...

  3. C++和C中的函数如何相互调用

    今天笔试遇到的一题,当时就写了在函数前声明为C,按C编译. 首先是在C中调用C++函数,包括普通函数,重载函数以及成员函数. 对于普通函数,在C++中声明为extern "C",在 ...

  4. UDS帧传输

    说明 在UDS协议中,其中有一点我视作为基础,即帧传输.也即是数据传输这一块,在UDS的帧传输中,分为4种: SF单帧 FF第一帧 CF连续帧 FC流控制帧 首先,我们抛开以上的东西,假设一个销售商( ...

  5. spring 部分配置内容备忘

    1.spring定时器简单配置: <bean name="taskJob" class="com.netcloud.mail.util.TaskJob"& ...

  6. JavaScript深入浅出4-对象

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

  7. 34 网络相关函数(二)——live555源码阅读(四)网络

    34 网络相关函数(二)——live555源码阅读(四)网络 34 网络相关函数(二)——live555源码阅读(四)网络 2)socketErr 套接口错误 3)groupsockPriv函数 4) ...

  8. 深入mysql "on duplicate key update" 语法的分析

    如果在INSERT语句末尾指定了on duplicate key update,并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值,则在出现重复值的行执行UPDATE:如果不 ...

  9. Wince常见操作

    1.获取本地代码启动路径 //在代码启动路径下存在 Files 文件夹 Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName(). ...

  10. poj 1326

    http://poj.org/problem?id=1326 一个模拟的水题 题意就是要你算飞行的英里数. F代表头等舱,为实际飞行的英里数的2倍. B为商务舱,为实际飞行的英里数的1.5倍. Y为经 ...