技术派社区»论坛 › 技•综合 › 程序设计语言 › 如何解决jquery ui 1.7.2 的dialog的ie泄露

[JavaScript] 如何解决jquery ui 1.7.2 的dialog的ie泄露

巫马秀洁 2013-11-10 23:53:56

本帖最后由 bigbang 于 2010-5-14 15:03 编辑
/ C5 H7 _: L' R. L3 E
- H$ g7 J5 G; $ s9 F# U6 X　　jquery ui 1.7.2的dialog在ie每次打开对话框在ie都是使内存增长，得到ie浏览器的url切换了才会释放内存，如果把网站做成frame主体的，即进入到网站都是统一的url就是噩梦。) U. o% G! X" f+ q1 {$ I. k" f
+ g% O6 E, k& P4 Z: B
　　先简单看下dialog的内存增长，打开development-bundledemosdialogmodal-form.html，点击”create new user”:
# g: a/ e; T5 B, U N& v$ O: b4 Y. y: p9 Z1 J, H
　　刚打开时候时ie内存：( B7 D. K$ G* X
　　

下载 (11.16 KB)
2010-5-14 15:037 j2 q1 f! Z+ v9 F# D

8 N8 N9 |2 J+ i! a" b1 r; f 　10重复点击”Create new user”——关闭：
+ ]0 ?2 a7 ~* @3 v k( O

下载 (13.04 KB)
2010-5-14 15:03
3 Y6 K* G: c8 [0 z0 c　
/ ^) s) i! u! F- ^2 V$ ) S　　修改ui.dialog.js:

$.extend($.ui.dialog.overlay, {
instances: [],
oldInstances: [], //修改一：添加oldInstances
maxZ: 0,
events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
function(event) { return event + '.dialog-overlay'; }).join(' '),
create: function(dialog) {
if (this.instances.length === 0) {
// prevent use of anchors and inputs
// we use a setTimeout in case the overlay is created from an
// event that we're going to be cancelling (see #2804)
setTimeout(function() {
// handle $(el).dialog().dialog('close') (see #4065)
if ($.ui.dialog.overlay.instances.length) {
$(document).bind($.ui.dialog.overlay.events, function(event) {
var dialogZ = $(event.target).parents('.ui-dialog').css('zIndex') || 0;
return (dialogZ > $.ui.dialog.overlay.maxZ);
});
}
}, 1);
// allow closing by pressing the escape key
$(document).bind('keydown.dialog-overlay', function(event) {
(dialog.options.closeOnEscape && event.keyCode
&& event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
});
// handle window resize
$(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
}
//修改二：替换var $el;
//var $el = $('').appendTo(document.body)
// .addClass('ui-widget-overlay').css({
// width: this.width(),
// height: this.height()
// });
var $el = (this.oldInstances.pop() || $('').addClass('ui-widget-overlay'))
.appendTo(document.body)
.css({
width: this.width(),
height: this.height()
});
(dialog.options.bgiframe && $.fn.bgiframe && $el.bgiframe());
this.instances.push($el);
return $el;
},
destroy: function($el) {
//修改三：替换注释的代码：
//this.instances.splice($.inArray(this.instances, $el), 1);
this.oldInstances.push(this.instances.splice($.inArray($el, this.instances), 1)[0]);
if (this.instances.length === 0) {
$([document, window]).unbind('.dialog-overlay');
}
$el.remove();
// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
var maxZ = 0;
$.each(this.instances, function() {
maxZ = Math.max(maxZ, this.css('z-index'));
});
this.maxZ = maxZ;
},
height: function() {
// handle IE 6
if ($.browser.msie && $.browser.version < 7) {
var scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
var offsetHeight = Math.max(
document.documentElement.offsetHeight,
document.body.offsetHeight
);
if (scrollHeight < offsetHeight) {
return $(window).height() + 'px';
} else {
return scrollHeight + 'px';
}
// handle "good" browsers
} else {
return $(document).height() + 'px';
}
},
width: function() {
// handle IE 6
if ($.browser.msie && $.browser.version < 7) {
var scrollWidth = Math.max(
document.documentElement.scrollWidth,
document.body.scrollWidth
);
var offsetWidth = Math.max(
document.documentElement.offsetWidth,
document.body.offsetWidth
);
if (scrollWidth < offsetWidth) {
return $(window).width() + 'px';
} else {
return scrollWidth + 'px';
}
// handle "good" browsers
} else {
return $(document).width() + 'px';
}
},
resize: function() {
/* If the dialog is draggable and the user drags it past the
* right edge of the window, the document becomes wider so we
* need to stretch the overlay. If the user then drags the
* dialog back to the left, the document will become narrower,
* so we need to shrink the overlay to the appropriate size.
* This is handled by shrinking the overlay before setting it
* to the full document size.
*/
var $overlays = $([]);
$.each($.ui.dialog.overlay.instances, function() {
$overlays = $overlays.add(this);
});
$overlays.css({
width: 0,
height: 0
}).css({
width: $.ui.dialog.overlay.width(),
height: $.ui.dialog.overlay.height()
});
}
});

复制代码修改后，重复点击后不会使内存增加很多，第一次点击的时候还是会使内存增加很多。
5 }( K8 Q& c$ j7 K( X, {
0 K4 V' j; t5 K- V/ I* } 跟踪代码，使内存增加就两个地方的appendTo(“body”)：8 w2 }' [' T, X4 C, |3 B, K2 {
& z. u' k1 h- ~0 z$ i/ H
221行：(uiDialog.next().length && uiDialog.appendTo('body'));
. f; u" }$ q, S# Y5 [/ }/ n& b2 h# ~! n& p
566行：var $el = $('').appendTo(document.body)$ F2 i! M! s `- D+ R5 O' j
" o+ Z- k3 ]+ ?$ N6 x# r: z
　　怎么解决这个问题还没什么好的方法，希望大家支持!

使用道具收藏举报

宗政优悦 2013-11-10 23:55:08

发发呆，回回帖，工作结束~

技术派-业余学院

[JavaScript] 如何解决jquery ui 1.7.2 的dialog的ie泄露