您的位置:首页 > 其它

项目集成-新旧项目整合

2013-12-05 09:15 344 查看

项目说明:

两个项目,原有项目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

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐