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.


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

2013 CVPR 录取文章

118 Robust Multi-Resolution Pedestrian Detection in Traffic Scenes Junjie Yan, Xucong Zhang, Zhen ...
  • android_asp
  • android_asp
  • 2013年08月26日 13:41
  • 5668

NPAPI——实现非IE浏览器的类似ActiveX的本地程序(插件)调用

一.Netscape Plugin Interface(NPAPI) 大致的说明可以看下官方文档Plugin 本文主要针对于javascript与插件交互部分做一些交流,比如用于数字证书的...
  • wangzhen209
  • wangzhen209
  • 2016年03月02日 15:50
  • 2871

Supervised Descent Method(人脸对齐之SDM论文解析)

这篇文章主要提出了一种名为SDM(Supervised Descent Method)的方法,用来最小化非线性最小二乘(Non-linear Least Squares)目标函数,即目标函数是均方误差...
  • jiajinrang93
  • jiajinrang93
  • 2017年03月31日 22:51
  • 2066

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

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

Hausdorff distance between mesh and its symmertic one.

转载自:http://www.cnblogs.com/jast/p/4225740.html When talking about distances, we usually mean the ...
  • menjiawan
  • menjiawan
  • 2015年03月24日 11:40
  • 476

Supervised Descent Method and its Applications to Face Alignment

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

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

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

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

Spationtemporal Saliency Detection Using Textural Contrast and Its Applications Last Edit 2013/12/3 ...
  • jxlijunhao
  • jxlijunhao
  • 2013年12月08日 21:08
  • 2083

Database and its applications

keywords: database 数据库 data element 数据源 retrivel 检索,回复 magnetizable media 可磁化介质 linkage 连接 s...
  • qq_29854443
  • qq_29854443
  • 2017年06月10日 14:03
  • 114

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

文章首先阐述Tencent搭建深度学习平台应满足的需求: (1)要求平台有能够训练大量的参数和数据的能力; (2)平台能够训练大模型; (3)平台在实际应用中能够简便的使用; 介绍了Google Di...
  • love252223849
  • love252223849
  • 2015年12月23日 15:02
  • 407
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Communication Between Hosting System and Its Plugin Applications(Cross Domains)
举报原因:
原因补充:

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