IE8的 JS 引擎如此不堪（二） - 解决方案
上一篇，IE8的JS引擎内存不停增长，是因为动态生成了一个image对象导致的。有了病因，就开始寻找治疗方法。
1、使用一个固定的img对象，但是无法获取地址改变后的图片大小，最总还是放弃；
2、寻找从JS代码上来避免内存泄漏的方法：google各种网站，不论是如何生成再销毁这个img对象，貌似都会泄漏，只好作罢。
3、改用弹窗，使用showModalDialog来显示图片，在Chrome下，弹窗行为与IE不一样，而且还会被拦截……
------ 无法用统一的方案来解决，最后决定使用混合方案，如果是IE，且为10以下版本，采用弹窗，如果是其他浏览器，采用原有弹出层的方案。
因此这样就简单了
JS代码：
$('a.image').click(function () {
var src = $(this).attr('href');
if($.browser.msie && $.browser.version < 10.0){ // ie10以下的浏览器
var encUrl = encodeURI(src);
var url = 'showimg.html?src=' + encUrl + '&rnd=' + Math.random();
window.showModalDialog(url,'图片显示','dialogWidth:800px;dialogHeight:560px;resizable:yes;center:yes');
}else{ // 其他浏览器
showImage(src); // 弹出层的方式
}
return false;
});
URL上加上一个随机数是为了避免浏览器缓存窗口用的，不然改了代码也无法刷新，还要清IE缓存；
弹出窗口的HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片</title>
</head>
<body style="background:#232323">
<div style="text-align:center;height:560px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="width : 800px;height:560px;">
<img id="img" style="margin:auto; vertical-align: middle;border:2px solid silver;" />
<td></tr>
</table>
</div>
</body>
<script type="text/javascript">
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
var url = getParameterByName('src');
var decUrl = decodeURI(url);
document.getElementById('img').src = decUrl;
</script>
</html>
最开始，打算根据图片大小弹出对话框，发现又会进入到动态生成img对象的陷阱，只好弹出固定大小的对话框，算是折衷方案。在弹出的网页中，希望图片能够居中显示，最开始用JS代码来根据图片大小及窗口高度调整图片位置，结果发现在IE8里面，弹出的窗口中，采用各种方式获取的窗口高度都是0，chrome与IE10都是OK的，#@$@#$!。最后想起来，表格的TD默认不就是垂直居中的么？就改成一个表格，固定好高度，自然就居中了，有的时候，复古也是一种解决方案。
