EXTJS內(nèi)使用ACTIVEX控件引起崩潰問(wèn)題的解決方法
更新時(shí)間:2010年03月31日 20:31:19 作者:
在本人目前的項(xiàng)目中,前端部分完全使用EXTJS基于“One-Page”理念搭建。
問(wèn)題
在本人目前的項(xiàng)目中,前端部分完全使用EXTJS基于“One-Page”理念搭建。除了一個(gè)HTML作為基本容器外,就全是JS文件了(頁(yè)面是由JS文件實(shí)現(xiàn)的)。當(dāng)用戶切換頁(yè)面時(shí)候,我們通過(guò)析構(gòu)上一個(gè)頁(yè)面對(duì)象,然后創(chuàng)建新頁(yè)面對(duì)象并展現(xiàn)在HTML中?;谶@種架構(gòu),我們還引入了一個(gè)ActiveX控件,用于展現(xiàn)報(bào)表。這一引入,問(wèn)題就出來(lái)了:只要是訪問(wèn)有報(bào)表控件存在的頁(yè)面,用戶切換2次頁(yè)面,IE就會(huì)崩潰(FF無(wú)此問(wèn)題),百試不爽。
原因
因?yàn)橄到y(tǒng)設(shè)計(jì)時(shí)考慮到了資源釋放,專門處理過(guò)析構(gòu)部分,而且無(wú)ActiveX的頁(yè)面不存在問(wèn)題。故問(wèn)題肯定是出在IE對(duì)包含在JS中的ActiveX控件釋放出了問(wèn)題。畢竟在傳統(tǒng)的以HTML或JSP、PHP頁(yè)搭建的前端中,ActiveX是屬于頁(yè)面的,只要用戶一跳轉(zhuǎn),頁(yè)面被Unload,其中的ActiveX也就銷毀了;而我們的系統(tǒng)使用的是通過(guò)不斷的重繪一張HTML頁(yè)面實(shí)現(xiàn)跳轉(zhuǎn),也就是系統(tǒng)永不會(huì)刷新,也就沒(méi)有Unload,ActiveX自然無(wú)法銷毀,導(dǎo)致瀏覽器崩潰。
解決方法
知道了原因,我們就想想法子。既然IE無(wú)法幫我們銷毀ActiveX控件。我們自己來(lái)就好了:
//@AcitveXObjectID: 要查找的節(jié)點(diǎn)范圍,從此節(jié)點(diǎn)一下查找待刪除的ActiveX。
//@ContianerID: 要?jiǎng)h除的ActiveX控件ID。
function ActiveXKiller(AcitveXObjectID,ContianerID){
var ce=document.getElementById(ContianerID);
if (ce){
var cce=ce.children;
for(var i=0;i<cce.length;i=i+1){
if(cce[i].id==AcitveXObjectID){
ce.removeChild(cce[i]);
}
}
}
}
這個(gè)方法就是用來(lái)干掉ActiveX控件的。 原理也簡(jiǎn)單。就是根據(jù)給定的一個(gè)節(jié)點(diǎn)范圍內(nèi)(一般是ActiveX控件的父節(jié)點(diǎn)、容器), 用給定的ActiveX在Dom中的ID來(lái)逐級(jí)查找,一旦找到就手動(dòng)Remove。
有了這個(gè)Killer,我們就能在頁(yè)面重繪之前,先搞定ActiveX,避免了崩潰。
另外要提到的,有一個(gè)特殊情況。就是當(dāng)你將一個(gè)ActiveX控件放在了一個(gè)Ext.Window 里。而天真地想讓Ext.Window在關(guān)閉的時(shí)候順帶幫你把里面的ActiveX也銷毀,就必須符合一個(gè)條件:
ActiveX的容器必須是Ext.Window本身。
也就是說(shuō):如果你將ActiveX控件放在一個(gè)Ext.Panel里,然后再放在Ext.Window里。就別指望Ext.Window關(guān)閉的時(shí)候可以帶你的ActiveX控件“一起走”了。
GoodLuck!
在本人目前的項(xiàng)目中,前端部分完全使用EXTJS基于“One-Page”理念搭建。除了一個(gè)HTML作為基本容器外,就全是JS文件了(頁(yè)面是由JS文件實(shí)現(xiàn)的)。當(dāng)用戶切換頁(yè)面時(shí)候,我們通過(guò)析構(gòu)上一個(gè)頁(yè)面對(duì)象,然后創(chuàng)建新頁(yè)面對(duì)象并展現(xiàn)在HTML中?;谶@種架構(gòu),我們還引入了一個(gè)ActiveX控件,用于展現(xiàn)報(bào)表。這一引入,問(wèn)題就出來(lái)了:只要是訪問(wèn)有報(bào)表控件存在的頁(yè)面,用戶切換2次頁(yè)面,IE就會(huì)崩潰(FF無(wú)此問(wèn)題),百試不爽。
原因
因?yàn)橄到y(tǒng)設(shè)計(jì)時(shí)考慮到了資源釋放,專門處理過(guò)析構(gòu)部分,而且無(wú)ActiveX的頁(yè)面不存在問(wèn)題。故問(wèn)題肯定是出在IE對(duì)包含在JS中的ActiveX控件釋放出了問(wèn)題。畢竟在傳統(tǒng)的以HTML或JSP、PHP頁(yè)搭建的前端中,ActiveX是屬于頁(yè)面的,只要用戶一跳轉(zhuǎn),頁(yè)面被Unload,其中的ActiveX也就銷毀了;而我們的系統(tǒng)使用的是通過(guò)不斷的重繪一張HTML頁(yè)面實(shí)現(xiàn)跳轉(zhuǎn),也就是系統(tǒng)永不會(huì)刷新,也就沒(méi)有Unload,ActiveX自然無(wú)法銷毀,導(dǎo)致瀏覽器崩潰。
解決方法
知道了原因,我們就想想法子。既然IE無(wú)法幫我們銷毀ActiveX控件。我們自己來(lái)就好了:
復(fù)制代碼 代碼如下:
//@AcitveXObjectID: 要查找的節(jié)點(diǎn)范圍,從此節(jié)點(diǎn)一下查找待刪除的ActiveX。
//@ContianerID: 要?jiǎng)h除的ActiveX控件ID。
function ActiveXKiller(AcitveXObjectID,ContianerID){
var ce=document.getElementById(ContianerID);
if (ce){
var cce=ce.children;
for(var i=0;i<cce.length;i=i+1){
if(cce[i].id==AcitveXObjectID){
ce.removeChild(cce[i]);
}
}
}
}
這個(gè)方法就是用來(lái)干掉ActiveX控件的。 原理也簡(jiǎn)單。就是根據(jù)給定的一個(gè)節(jié)點(diǎn)范圍內(nèi)(一般是ActiveX控件的父節(jié)點(diǎn)、容器), 用給定的ActiveX在Dom中的ID來(lái)逐級(jí)查找,一旦找到就手動(dòng)Remove。
有了這個(gè)Killer,我們就能在頁(yè)面重繪之前,先搞定ActiveX,避免了崩潰。
另外要提到的,有一個(gè)特殊情況。就是當(dāng)你將一個(gè)ActiveX控件放在了一個(gè)Ext.Window 里。而天真地想讓Ext.Window在關(guān)閉的時(shí)候順帶幫你把里面的ActiveX也銷毀,就必須符合一個(gè)條件:
ActiveX的容器必須是Ext.Window本身。
也就是說(shuō):如果你將ActiveX控件放在一個(gè)Ext.Panel里,然后再放在Ext.Window里。就別指望Ext.Window關(guān)閉的時(shí)候可以帶你的ActiveX控件“一起走”了。
GoodLuck!
相關(guān)文章
EXT窗口Window及對(duì)話框MessageBox
ExtJS中窗口是由Ext.Window類定義,該類繼承自Panel,因此窗口其實(shí)是一種特殊的面板Panel。窗口包含了浮動(dòng)、可拖動(dòng)、可關(guān)閉、最大化、最小化等特性。2011-01-01
Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng),許多網(wǎng)友都很好奇這個(gè)問(wèn)題,明確的一點(diǎn)是在extjs4.0中要使用load來(lái)獲取數(shù)據(jù),到底如何實(shí)現(xiàn),下面小編為大家分享具體步驟2016-05-05
extjs 學(xué)習(xí)筆記 四 帶分頁(yè)的grid
很多時(shí)候,我們需要顯示在grid中的數(shù)據(jù)不是短短的幾條或者幾十條,而是成千上萬(wàn)條。如果讓大量的數(shù)據(jù)一股腦全都顯示在一個(gè)頁(yè)面中,可以想象會(huì)造成什么樣的用戶體驗(yàn)。2009-10-10
Extjs學(xué)習(xí)筆記之三 extjs form更多的表單項(xiàng)
本文接著上講Extjs學(xué)習(xí)筆記之二 Extjs之Form介紹Extjs的表單。Extjs除了類似普通的html form的表單項(xiàng)之外,還有一些功能更為豐富實(shí)用的表單項(xiàng)。2010-01-01
Extjs學(xué)習(xí)筆記之九 數(shù)據(jù)模型(上)
本文開(kāi)始進(jìn)入Extjs最核心最優(yōu)秀的部分。2010-01-01
ExtJS4如何給同一個(gè)formpanel不同的url
這篇文章主要介紹了ExtJS4如何給同一個(gè)formpanel不同的url,需要的朋友可以參考下2014-05-05
Extjs TriggerField在彈出窗口顯示不出問(wèn)題的解決方法
解決Extjs TriggerField在彈出窗口顯示不出問(wèn)題2010-01-01

