移动Web应用程序开发HTML5篇 (六) Communication API

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。

本篇是HTML5介绍的第六篇,主要介绍HTML5的Communication API。

相关文章:

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

 

1. Communcation API 介绍

通信(Communication)API是HTML5中用来实现正在运行的两个页面之间进行通信和信息共享的API,在开发Web应用程序时,其主要功能就是可以实现应用程序进程间通信。目前浏览器对其支持情况如下图:



2. Communcation API 运行流程

通信(Communication)API是HTML5中用来实现正在运行的两个页面之间进行通信和信息共享的API,



如上图所示,

Application在进行通信的时候被分为Host page(发送信息的页面),Client Page(接受信息的页面)。

Host page在发送信息的时候可以在代码中指定其信息为广播还是指定目标和端口进行发送。

发送之后,相应的接收端可以接收相同协议的Host page发送过来的消息。

当然,接收端有一个权限验证的过程,验证其消息来源于可信区域。



3. Communication API使用介绍

通信(Communication)API在HTML5中的使用的使用步骤主要分为三步,如下图所示:



从图中,大家可以看出如何写相应的代码。

在Host page端onSendMessage函数负责发送信息,并指定信息的发送方式:

 

function onSendMessage(e) {

	//Loop through all the open windows and send the message

		for(var d = 0; d < windows.length; d++){

			windows[d].postMessage($('#message').val(), 'http://localhost');

			windows[d].focus();

		}

		//Reset the textarea

		$('#message').val('');

	}


在Client page端messageHandler函数来接收信息。

 

function messageHandler(e) {


	//Check the origin of the message

	switch(e.origin) {

		//if it is the domain that we are listening from

		case "http://experiments.72lions.com":

			$('#message').append('<div>' + e.data + '</div>').css('display','block').stop().animate({opacity:1}, 200);

		break;

	default:

		//Do nothing if the domain is not the one we are listening from

	}

}


运行结果如图所示。



完整代码下载地址: 下载

 

相关文章:

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

本篇完,参考文章. Pro HTML5 Programing

有关编译器优化的更完整信息,请参阅优化通知