• 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默认不就是垂直居中的么?就改成一个表格,固定好高度,自然就居中了,有的时候,复古也是一种解决方案。

  • 相关阅读:
    蓝桥杯 十六进制转八进制
    蓝桥杯 字母图形
    2017.12.13T19_B2_5mianshiti
    2017.11.21T19_B2_6.2讲义
    2017.12.13T19_B2_6zuoye
    2017.12.1T19_B2_5zuoye
    2017.12.1T19_B2_4zuoye
    2017.12.1T19_B2_4——2
    2017.12.1T19_B2_4.3kehouzuoye
    2017.12.1T19_B2_4.2
  • 原文地址:https://www.cnblogs.com/mobwiz/p/3177405.html
Copyright © 2020-2023  润新知