lucifinilhades

浏览: 86021 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 跨文档消息传输

博客分类：

HTML5/CSS3

HTML5 JavaScript 通信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 Web Sockets通信 | HTML5 离线应用程序【2】

2011-10-29 19:11
浏览 1997
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 跨文档消息传输

基本介绍

跨域示例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 跨文档消息传输

基本介绍

跨域示例

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

HTML5 绘制图形【1】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 Web Storage

HTML5 多媒体播放【3】

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 拖放API

HTML5 文件API

最近访客更多访客>>