Communication Between Hosting System and Its Plugin Applications(Cross Domains)

原创 2013年12月04日 12:26:21

Since at the very beginning you need to initiate the whole thing on the hosting app side, so your hosting application should render something like:

<div class="ms_bodyWrap">
	<div class="ms_body dbShop-theme-bodybg" >
		
		<script>
			if(!window.hasInitHostApplicationAddon){
				initHostApplicationAddon('f3f4612484faba346107da36c44e5e24',					
					'http://plugin.system.domain/app.php?shopName=devb06§ion',
					'',	'http:///plugin.system.domain/container.php?container_js_path=http%3A%2F%2Fhost.application.domain%2Fs%2Fv1344%2Fjs%2FhostAppPluginContainerAll.js',
					'http://host.application.domain/swf/easyxdm.swf',			
					'100%',
					'600px',
					'D',
					''
					);

				window.hasInitHostApplicationAddon= true;
			}
		</script>
		<div id="appContainer"  class="app_mainBody dbShop-ui-editArea">
			<div class="dbShop-ui-appLoading" id="dbShop-ui-appLoading" style="display:block;">
				<img src="http://host.application.domain/s/v1344/images/loading_app.gif" /> Loading... 
			</div>
		</div>	
				
	</div>
</div>


It will just present a loading image in the container DIV, and at meanwhile run the javascript function initHostApplicationAddon().


Therefore, initHostApplicationAddon() is the entry point of the entire procedure

function initHostApplicationAddon(shopGuid, iframeUrl, customDomain, containerUrl, swfPath, width, height, deviceType, mode) 
{
	var readyEvent = deviceType == 'M' ? 'pageshow' : 'ready';
	
	$(document).bind(readyEvent, function(){
		var isOpeningDialog = false;
		var hostAppapi = new easyXDM.Rpc(
			/** The configuration */
			{
				swf: swfPath,
				remote: containerUrl,
				container: "appContainer",
				props: {
					scrolling: "no",
					style: {
						width: width,
						height: height,
						border: "0"
					},
					allowTransparency: deviceType=='M' ? "true" : "false"
				},	
			onReady: function(){}
			}, 
		/** The interface configuration */ 
		{
			local:
			{
				onAppReady: function(){

					if(deviceType == 'M'){
						$.mobile.loading('hide');			
					}else{
						$("#dbShop-ui-appLoading").hide();						
					}
				},
				containerReady: function() {
					var data = {src : iframeUrl};
					hostAppapi.redirectIframe(data);
				},
				authen: function(data) {},
				...
			},

			remote:
			{
				redirectIframe: {},
				...
			}
		});
		
		var onAuthCallback = function(data) {};
		...
	
	});
}


Something to highlight:

initHostApplicationAddon() actually attaches a callback function onto the document-ready event, which is anonymous. The function creates the consumer side of easyXDM, and sets up everything, the two most important settings are remote andcontainer, remote is a url of the provider side's page, and container is the id of the DIV which will hold the iFrame later.

So the trick here is that the URL of remote comprises a URL belongs to plugin system domain, but appended with a path of Javascript file, which is actually hosted under host application's domain. And then the next question is what does this container.php in the URL do?

<?php 
	$containerJsPath = isset($_GET['container_js_path']) ? $_GET['container_js_path'] : '';
?>
<script type="text/javascript" src="<?php echo $containerJsPath ?>"></script>
<style>
body {margin:0;}
</style>


It just includes the Js file's URI, with outputting a blank HTML. So, now is the magics inside hostAppPluginContainerAll.js

window.hostAppapi = new easyXDM.Rpc({
	swf: "http://" + baseUrl + "/swf/easyxdm.swf",
	onReady: function()
	{
		iframe = document.createElement("iframe");
		iframe.frameBorder = 0;
		iframe.width = "100%";
		iframe.height = "100%";
		iframe.scrolling = "no";
		document.body.appendChild(iframe);

		hostAppapi.containerReady();
	}
}, {
	local: {
		redirectIframe: function(data) {},
		likeStatusChange: function(data) {},
		...
	},
	remote: {
		onAppReady: {},
		authen: {},
		...
	}
});
})();


It sets up the provider side by creating the easyXDM object with the same name as consumer side (hostAppapi).

As regards the communication between the two parts, it is out of the scope of this article, you can refer to easyXDM official demo:http://consumer.easyxdm.net/current/example/methods.html

Requesting the provider part and setting up the communication channel is also easyXDM's business, so won't be discussed here.

We just need to keep in mind that after the setup procedure is done, onReady() callbacks will be invoked on both consumer & provider sides automatically.

At this point, the HTML should become:

<div class="ms_bodyWrap">
	<div class="ms_body dbShop-theme-bodybg" >
		
		<script>
			if(!window.hasInitHostApplicationAddon){
				initHostApplicationAddon('f3f4612484faba346107da36c44e5e24',					
					'http://plugin.system.domain/app.php?shopName=devb06§ion',
					'',	'http:///plugin.system.domain/container.php?container_js_path=http%3A%2F%2Fhost.application.domain%2Fs%2Fv1344%2Fjs%2FhostAppPluginContainerAll.js',
					'http://host.application.domain/swf/easyxdm.swf',			
					'100%',
					'600px',
					'D',
					''
					);

				window.hasInitHostApplicationAddon= true;
			}
		</script>
		<div id="appContainer"  class="app_mainBody dbShop-ui-editArea">
			<div class="dbShop-ui-appLoading" id="dbShop-ui-appLoading" style="display:block;">
				<img src="http://host.application.domain/s/v1344/images/loading_app.gif" /> Loading... 
			</div>
			
			
			<iframe scrolling="no" frameborder="0" name="easyXDM_default3242_provider" id="easyXDM_default3242_provider" style="width: 100%; height: 568px; border: 0px none;" src="http://plugin.system.domain/container.php?container_js_path=http%3A%2F%2Fhost.application.domain%2Fs%2Fv1344%2Fjs%2FhostAppPluginContainerAll.js&xdm_e=http%3A%2F%2Fhost.application.domain&xdm_c=default3242&xdm_p=1">

				<html>
					<head>
						<script src="http://host.application.domain/s/v1344/js/hostAppPluginContainerAll.js" type="text/javascript"></script>
						<style>
							body {margin:0;}
						</style>
					</head>
					
					<body>

					</body>
				</html>
				
			</iframe>
			
			
		</div>	
				
	</div>
</div>


The process can be illustrated as:



And in our case, we would not make use of this callback on the consumer side, we just use the provider side. Its body includes line:

iframe = document.createElement("iframe");
iframe.frameBorder = 0;
iframe.width = "100%";
iframe.height = "100%";
iframe.scrolling = "no";
document.body.appendChild(iframe);

hostAppapi.containerReady();


Its main responsibility is to create another iFrame (because the easyXDM will create the first iFrame inside the container DIV). And then inform the consumer by calling its API: containerReady().

containerReady: function() {
	var data = {src : iframeUrl};
	hostAppapi.redirectIframe(data);
},

containerReady() will call provider's API redirectIframe(), to make the iFrame redirect to the URL of plugin's entry page. The flow is shown as:



And in the first outputted HTML page of the plugin system, a Javascript from host application domain (hostAppPluginCommon.js) is included:

window.shop88api = parent.shop88api;
window.onload= function (){
	hostAppapi.onAppReady();
};

At the point it calles onAppReady() method of consumer, and what it does is to hide and remove the loading animation.

By now, the initiation process is completed, and onward the Js inside the provider iFrame can call any method that consumer exposes and vice versa.


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

A Simple C++ Plugin System -- Interface Between Plugin and Main Application

Abstract前人已有A Simple C++ Plugin System Summary,本文将处理,如何实现插件与主程序之间的接口Introduction支持任意的命令:插件的基本类往往只提供少...

Hausdorff distance between mesh and its symmertic one.

转载自:http://www.cnblogs.com/jast/p/4225740.html When talking about distances, we usually mean the ...

论文笔记——Mariana:Tencent Deep Learning Platform and its Applications

文章首先阐述Tencent搭建深度学习平台应满足的需求: (1)要求平台有能够训练大量的参数和数据的能力; (2)平台能够训练大模型; (3)平台在实际应用中能够简便的使用; 介绍了Google Di...

2009年《斯坦福大学开放课程 : 傅立叶变换及应用》(Open Stanford Course : The Fourier Transform and Its Applications )共30节[MP4]

2009年《斯坦福大学开放课程 : 傅立叶变换及应用》(Open Stanford Course : The Fourier Transform and Its Applications )共30节[...
  • rosonex
  • rosonex
  • 2011年02月28日 08:21
  • 1458

Seminar《Fast Random Walk with Restart and Its Applications》

Optimization about inverse of big matrix though partition and low rank approximation by making use ...
  • zzchust
  • zzchust
  • 2015年11月18日 21:18
  • 628

[精读]Spationtemporal Saliency Detection Using Textural Contrast and Its Applications

Spationtemporal Saliency Detection Using Textural Contrast and Its Applications Last Edit 2013/12/3 ...

Database and its applications

keywords: database 数据库 data element 数据源 retrivel 检索,回复 magnetizable media 可磁化介质 linkage 连接 s...

关于A Part-based Online Modeling Algorithm and Its Applications on Rubust Viasual Tracking

一个在线基于部分的建模算法及其在鲁棒视觉跟踪中的应用 摘要:这篇文章提出了一种在线的基于部分的对象建模方法和跟踪方法。对待跟踪对象首先采用了IVT跟踪器来进行跟踪,它会在主要帧图像中返回对象的外形。基...

Supervised Descent Method and its Applications to Face Alignment

本方法是当前人脸对齐最流行的算法,速度很快,很稳定。下面我将介绍一下这篇文章的整体思路和相关细节。 人脸对齐就是要找人脸的特征点。如图 。 我们要找到眼睛、鼻子、嘴巴等特征点。那么如何去做呢?方法...

(待翻译)Building Secure ASP.NET Applications: Authentication, Authorization, and Secure Communication

IIS and ASP.NET Processing Note   The information in this section applies to Internet Information...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Communication Between Hosting System and Its Plugin Applications(Cross Domains)
举报原因:
原因补充:

(最多只允许输入30个字)