EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
- 作者: 随便42014966
- 来源: 51数据库
- 2020-08-07
在本人目前的项目中，前端部分完全使用EXTJS基于“One-Page”理念搭建。
问题
在本人目前的项目中，前端部分完全使用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!
在本人目前的项目中，前端部分完全使用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!
推荐阅读
