`
lucifinilhades
  • 浏览: 84905 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 跨文档消息传输

HTML5JavaScript通信API
阅读更多

基本介绍

HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域+端口号）的Web网页之间可以互相通信，甚至可以实现跨域通信。

要想授受从其他窗口发送来的信息，必须对窗口对象的message事件进行监听，代码如下：

window.addEventListener("message", function(event) {
    // 处理程序代码
}, false);

使用window对象的postMessage()方法向其他窗口发送消息，该方法的定义如下：

otherwindow.postMessage(message, targetOrigin);

该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何JavaScript对象（通过JSON转换对象为文本）；第二个参数为接收消息的对象窗口的URL地址，可以在URL地址字符串中使用通配符“*”指定全部地址，不过建议使用准确的URL地址。otherwindow为要发送窗口对象的引用，可以通过window.open()方法返回该对象，或通过对window.frames数组指定序号（index）或名字的方式来返回单个frame所属性的窗口对象。

跨域示例

主页面向iframe子页面发送消息，iframe子页面显示接收到的消息，然后向主页面返回消息，最后主页面接收消息并使用提示框显示该消息。

主页面代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>跨文档消息传输示例主文档</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">
$(function() {
	// 监听message事件。
	window.addEventListener("message", function(event) {
		// 忽略指定URL之外的页面发送的消息。
		if(event.origin != "http://www.blue-butterfly.net") return;
		alert(event.data); // 显示消息。
	}, false);
	
	$("#iframeContent").load(function(event) {
	        // 向子页面发送消息
		this[0].postMessage("Hello", "http://www.blue-butterfly.net/test/");
	});
});
		</script>
	</head>
	<body>
		<header>
			<h1>跨域通信示例</h1>
		</header>
		<iframe id="iframeContent" width="400" src="http://www.blue-butterfly.net/test/"></iframe>
	</body>
</html>

子页面中的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">
$(function() {
	window.addEventListener("message", function(event) {
		if(event.origin != "http://Lulingniu") return;
		$("#console").append(event.origin).append("传来的消息：").append(event.data);
                // 向主页面发送消息。
		event.source.postMessage("Hello, there is :" + this.location, event.origin);
	}, false);
});
		</script>
	</head>
	<body>
		<p>这是iframe中的内容。</p>
		<div id="console"></div>
	</body>
</html>
  • 通过对window对象的message事件进行监听，可以接收消息。
  • 通过访问message事件的origin属性，可以获取消息的发送源（本例中主页面的发送源为“http://Lulingniu”，子页面的发送源为“http://www.blue-butterfly.net”）。注意：发送源与网站的URL地址不是一个概念，发送源只包括域名与端口号，为了不接收其他源恶意发送过来的消息，最好对发送源做检查。
  • 通过访问message事件的data属性，可以取得消息内容（可以是任何JavaScript对象，使用JSON）。
  • 使用postMessage()方法发送消息。
  • 通过访问message事件的source属性，可以获取消息发送源的窗口的代理对象。
分享到：
| HTML5 离线应用程序【2】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5 跨文档消息传输示例探讨

    想实现跨文档消息传输首先要对窗口对象的message事件进行监听，然后使用window对象的postMessage()方法向其他窗口发送消息，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈

    HTML5开发精要与实例详解（完整版源代码含说明文档）

    第7章用单点登录和获取批量数据这2个案例讲解了html 5中的跨文档的消息传输技术；第8章用2个案例讲解了如何利用web workers实现多线程处理；第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息；第10~...

    HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

    HTML5新增通信相关两个API，跨文档消息传输与WEB Sockets API， 跨文档消息传输功能，可以在不同网页文档，不同端口（跨域情况下）进行消息传递。 使用web sockets api 可以让客户端与服务器端通过socket端口传递...

    HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf

    6.1.2 跨文档消息通信的浏览器支持情况 122 6.1.3 使用postMessage API 123 6.1.4 使用postMessage API创建应用 124 6.2 XMLHttpRequest Level 2 128 6.2.1 跨源XMLHttpRequest 129 6.2.2 进度事件 130 6.2.3...

    HTML, XHTML, and CSS Bible, 5th Edition.pdf

    第7章用单点登录和获取批量数据这2个案例讲解了html 5中的跨文档的消息传输技术；第8章用2个案例讲解了如何利用web workers实现多线程处理；第9章用1个案例讲解了如何利用geolocation api来获取地理位置信息；第10~...

    JAVA_API1.6文档（中文）

    本文档是 Java 2 Platform Standard Edition 6.0 的 API 规范。 请参见： 描述 Java 2 Platform 软件包 java.applet 提供创建 applet 所必需的类和 applet 用来与其 applet 上下文通信的类。 java.awt 包含...

    从入门到精通HTML5——PDF——网盘链接

    　1.3 HTML的基本结构 5 　1.3.1 HTML文件的编写方法 5 　1.3.2 文件开始标签&lt;html&gt; 7 　1.3.3 文件头部标签&lt;head&gt; 7 　1.3.4 文件标题标签&lt;title&gt; 7 　1.3.5 文件主体标签&lt;body&gt; 7 　1.3.6...

    HTML5的postMessage的使用手册

    针对这些令人头疼的跨域问题，html5特地推出新功能–postMessage(跨文档消息传输)。postMessage在使用时，需要传入2个参数，data和originUrl。data是指需要传递的内容，但是部分浏览器只能处理字符串参数，所以我们...

    JavaAPI1.6中文chm文档 part1

    java.awt.dnd Drag 和 Drop 是一种直接操作动作，在许多图形用户界面系统中都会遇到它，它提供了一种机制，能够在两个与 GUI 中显示元素逻辑相关的实体之间传输信息。 java.awt.event 提供处理由 AWT 组件所激发的...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台性，实现了“认我测”在线认证检测系统。 综上所述，“认我测”在线认证检测系统，率先填补了认证检测领域移动端的空缺，提供了Web浏览器+...

    XML.zip_w3c

    XML案例解析教程 eXtensible Markup Language 可扩展标记语言 ...它是Internet环境中跨平台的、依赖于内容的技术，是这个时代中处理分布式结构信息的选择工具，用它来简化通过Internet的文档信息传输。

    [Java参考文档]

    java.awt.dnd Drag 和 Drop 是一种直接操作动作，在许多图形用户界面系统中都会遇到它，它提供了一种机制，能够在两个与 GUI 中显示元素逻辑相关的实体之间传输信息。 java.awt.event 提供处理由 AWT 组件所激发的...

    iWeb Office2000[OCX版]

    5、采用了Com组件和JavaBean组件技术，很好的实现了跨平台系统，便于开发。 运行环境 =============================================================================== 硬件平台： 台式机 CPU ...

    html入门到放弃笔记

    HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点：必须通过指定的客户端软件才能访问...

    iWeb Office2000[ASP版]

    5、采用了Com组件和JavaBean组件技术，很好的实现了跨平台系统，便于开发。 运行环境 =============================================================================== 硬件平台： 台式机 CPU ...

Magicbox
Global site tag (gtag.js) - Google Analytics