项目说明：
两个项目，原有项目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;" οnclick="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;" οnclick="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
权限同步，集成，采用单点登陆；
3349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
