关闭

[置顶] 项目集成-新旧项目整合

1240人阅读 评论(0) 收藏 举报
分类:

项目说明:

两个项目,原有项目A为flex  + Java 开发,已经运行多年;由于某种学习成本原因产生了B项目,B.为新开发项目,SSH框架,页面使用jsp,是对A项目的重新开发,但只开发了一半功能。


A项目既然使用多年,客户肯定还是会再用,而B项目先期只开发了一半功能,所以功能只有开发多少切换多少,这就要求新项目用起来,老项目也要用起来,但这是两个完全独立的项目。


整合中涉及到的问题:

1.权限同步;

2.跨域、集成,新项目调用老项目的模块;

3.跨域调用,新项目为jsp页面,需要调用老项目的flex module;


分步实现,如下:


跨域,消息在全域内互相监听,方便flex和jsp跨域通信


主要代码如下:



iframe (children project):

<title>跨域-客户端</title>
		<script
			src="http://127.0.0.1:8787/crossdomain/message/messenger.js"></script>
		<script>
	/*初始化iframe内容*/
	var messenger = Messenger.initInIframe();
	/*监听主页面发送过来的信息*/
	messenger.onmessage = function(data) {
		var newline = '\n';
		var text = document.createTextNode(data + newline);
		document.getElementById('wrap').appendChild(text);
	}
	/*发送信息,主页面即可监听到*/
	function sendMessage() {
		var message = document.getElementById('message');
		messenger.send(message.value);
		message.value = '';
	}

	var bySendMessage =function()
	{
		sendMessage();
	}
</script>
	</head>

	<body>
	<textarea id="wrap" rows="6" cols="60"></textarea>

	<div>
		<input type="text" id="message" size="108" maxlength="130"  style="float:left;margin:18px;"/>
		<input type="button"  id="sendmessage" value="send" style="float:left;margin:18px;" onclick="bySendMessage()">
	</div>




main  project:

<script src="message/messenger.js"></script>
		
	</head>

	<body>
		<iframe name="iframe" id="iframe" src="http://127.0.0.1:8181/crossdomain/iframe.jsp"
			width="920px" style="height: 516px;"></iframe>
			
			<textarea rows="6" cols="60" id="output"></textarea>
		<div>
			<input type="text" id="message" size="108" maxlength="130"  style="float:left;margin:18px;"/>
			<input type="button"  id="sendmessage" value="send" style="float:left;margin:18px;" onclick="bySendMessage()">
		</div>
		

		<h3 style="clear: both;">
			flex code
		</h3>

<script type="text/javascript">
	
	/*初始化iframe内容*/
	var messenger = Messenger.initInParent(document.getElementById('iframe'));
	var btn = document.getElementById("sendmessage");
	
	/*监听主页面发送过来的信息*/
	messenger.onmessage = function(data) {
		var newline = '\n';
		var text = document.createTextNode(data + newline);
		document.getElementById('output').appendChild(text);
	}
	
	/*发送信息,主页面即可监听到*/
	function sendMessage() {
		var message = document.getElementById('message');
		messenger.send(message.value);
		message.value = '';
	}
	
	var bySendMessage = function(){
		sendMessage();
	}
	
</script>



JS代码倒序


function Messenger(win) {
	// save the pointer to the window which is interacting with
	this.win = win;
	this.init();
}

// postMessage API is supported
Messenger.prototype.init = function() {
	var self = this;
	var receiver = function(event) {
		// Some IE-component browsers fails if you compare
		// window objects with '===' or '!=='.
		if (event.source != self.win)
			return;
		(self.onmessage || function() {
		}).call(self, event.data);
	};
	if (window.addEventListener)
		window.addEventListener('message', receiver, false);
	else if (window.attachEvent)
		window.attachEvent('onmessage', receiver);
};

Messenger.prototype.send = function(data) {
	this.win.postMessage(data, '*');
};

Messenger.initInParent = function(frame) {
	return new this(frame.contentWindow);
};

Messenger.initInIframe = function() {
	return new this(window.parent);
};

// in IE, postMessage API is not supported
if (!window.postMessage && window.attachEvent) {
	// redefine the init method
	Messenger.prototype.init = function() {
		var isSameOrigin = false;
		// test if the two document is same origin
		try {
			isSameOrigin = !!this.win.location.href;
		} catch (ex) {
		}
		if (isSameOrigin) {
			this.send = this.sendForSameOrigin;
			this.initForSameOrigin();
			return;
		}

		// different origin case
		// init the message queue, which can guarantee the messages won't be
		// lost
		this.queue = [];
		if (window.parent == this.win) {
			this.initForParent();
		} else {
			this.initForFrame();
		}
	};

	Messenger.prototype.sendForSameOrigin = function(data) {
		var self = this;
		setTimeout(function() {
			var event = self.win.document.createEventObject();
			event.eventType = 'message';
			event.eventSource = window;
			event.eventData = data;
			self.win.document.fireEvent('ondataavailable', event);
		});
	};

	Messenger.prototype.initForSameOrigin = function() {
		var self = this;
		document.attachEvent('ondataavailable', function(event) {
			if (!event.eventType || event.eventType !== 'message'
					|| event.eventSource != self.win)
				return;
			(self.onmessage || function() {
			}).call(self, event.eventData);
		});
	};

	// create two iframe in iframe page
	Messenger.prototype.initForParent = function() {
		var fragment = document.createDocumentFragment();
		var style = 'width: 1px; height: 1px; position: absolute; left: -999px; top: -999px;';
		var senderFrame = document.createElement('iframe');
		senderFrame.style.cssText = style;
		fragment.appendChild(senderFrame);
		var receiverFrame = document.createElement('iframe');
		receiverFrame.style.cssText = style;
		fragment.appendChild(receiverFrame);

		document.body.insertBefore(fragment, document.body.firstChild);
		this.senderWin = senderFrame.contentWindow;
		this.receiverWin = receiverFrame.contentWindow;

		this.startReceive();
	};

	// parent page wait the messenger iframe is ready
	Messenger.prototype.initForFrame = function() {
		this.senderWin = null;
		this.receiverWin = null;

		var self = this;
		this.timerId = setInterval(function() {
			self.waitForFrame();
		}, 50);
	};

	// parent page polling the messenger iframe
	// when all is ready, start trying to receive message
	Messenger.prototype.waitForFrame = function() {
		var senderWin;
		var receiverWin;
		try {
			senderWin = this.win[1];
			receiverWin = this.win[0];
		} catch (ex) {
		}
		if (!senderWin || !receiverWin)
			return;
		clearInterval(this.timerId);

		this.senderWin = senderWin;
		this.receiverWin = receiverWin;
		if (this.queue.length)
			this.flush();
		this.startReceive();
	};

	// polling the messenger iframe's window.name
	Messenger.prototype.startReceive = function() {
		var self = this;
		this.timerId = setInterval(function() {
			self.tryReceive();
		}, 50);
	};

	Messenger.prototype.tryReceive = function() {
		try {
			// If we can access name, we have already got the data.
			this.receiverWin.name;
			return;
		} catch (ex) {
		}

		// if the name property can not be accessed, try to change the messenger
		// iframe's location to 'about blank'
		this.receiverWin.location.replace('about:blank');
		// We have to delay receiving to avoid access-denied error.
		var self = this;
		setTimeout(function() {
			self.receive();
		}, 0);
	};

	// recieve and parse the data, call the listener function
	Messenger.prototype.receive = function() {
		var rawData = null;
		try {
			rawData = this.receiverWin.name;
		} catch (ex) {
		}
		if (!rawData)
			return;
		this.receiverWin.name = '';

		var self = this;
		var dataList = rawData.substring(1).split('|');
		for ( var i = 0; i < dataList.length; i++)
			(function() {
				var data = decodeURIComponent(dataList[i]);
				setTimeout(function() {
					(self.onmessage || function() {
					}).call(self, data);
				}, 0);
			})();
	};

	// send data via push the data into the message queue
	Messenger.prototype.send = function(data) {
		this.queue.push(data);
		if (!this.senderWin)
			return;
		this.flush();
	};

	Messenger.prototype.flush = function() {
		var dataList = [];
		for ( var i = 0; i < this.queue.length; i++)
			dataList[i] = encodeURIComponent(this.queue[i]);
		var encodedData = '|' + dataList.join('|');
		try {
			this.senderWin.name += encodedData;
			this.queue.length = 0;
		} catch (ex) {
			this.senderWin.location.replace('about:blank');
			var self = this;
			setTimeout(function() {
				self.flush();
			}, 0);
		}
	};

}


跨域结束,后续增加.......


js压缩(使用google compiler)
java -jar ../web/WEB-INF/lib/compiler.jar --help
java -jar ../web/WEB-INF/lib/compiler.jar --js ../web/sources/gt_source.js --js_output_file ../web/gt.js


新旧项目切换使用javascript调用flex module


权限同步,集成,采用单点登陆;






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:351063次
    • 积分:5016
    • 等级:
    • 排名:第5783名
    • 原创:155篇
    • 转载:32篇
    • 译文:1篇
    • 评论:214条
    最新评论