EXTJS內使用ACTIVEX控件引起崩潰問題的解決方法
2024-05-06 14:10:47
供稿：網友
問題
在本人目前的項目中，前端部分完全使用EXTJS基于“One-Page”理念搭建。除了一個HTML作為基本容器外，就全是JS文件了(頁面是由JS文件實現的)。當用戶切換頁面時候，我們通過析構上一個頁面對象，然后創建新頁面對象并展現在HTML中。基于這種架構，我們還引入了一個ActiveX控件，用于展現報表。這一引入，問題就出來了：只要是訪問有報表控件存在的頁面，用戶切換2次頁面，IE就會崩潰(FF無此問題)，百試不爽。
原因
因為系統設計時考慮到了資源釋放，專門處理過析構部分，而且無ActiveX的頁面不存在問題。故問題肯定是出在IE對包含在JS中的ActiveX控件釋放出了問題。畢竟在傳統的以HTML或JSP、PHP頁搭建的前端中，ActiveX是屬于頁面的，只要用戶一跳轉，頁面被Unload,其中的ActiveX也就銷毀了;而我們的系統使用的是通過不斷的重繪一張HTML頁面實現跳轉，也就是系統永不會刷新，也就沒有Unload，ActiveX自然無法銷毀，導致瀏覽器崩潰。
解決方法
知道了原因，我們就想想法子。既然IE無法幫我們銷毀ActiveX控件。我們自己來就好了:
代碼如下:
//@AcitveXObjectID: 要查找的節點范圍，從此節點一下查找待刪除的ActiveX。
//@ContianerID: 要刪除的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]);
}
}
}
}
這個方法就是用來干掉ActiveX控件的。 原理也簡單。就是根據給定的一個節點范圍內(一般是ActiveX控件的父節點、容器), 用給定的ActiveX在Dom中的ID來逐級查找,一旦找到就手動Remove。
有了這個Killer，我們就能在頁面重繪之前，先搞定ActiveX，避免了崩潰。
另外要提到的，有一個特殊情況。就是當你將一個ActiveX控件放在了一個Ext.Window 里。而天真地想讓Ext.Window在關閉的時候順帶幫你把里面的ActiveX也銷毀，就必須符合一個條件：
ActiveX的容器必須是Ext.Window本身。
也就是說：如果你將ActiveX控件放在一個Ext.Panel里，然后再放在Ext.Window里。就別指望Ext.Window關閉的時候可以帶你的ActiveX控件“一起走”了。
GoodLuck!
