你的位置:首页 > Java教程

[Java教程]细数IE的那些坑


注:本文将不定期更新,供前端开发人员参考,一起吐槽IE,辅助解决浏览器兼容性问题。

 

背景:ICMS2.0(我们公司开发的智能信用卡系统)换版时,准备上线页面静态化后的版本。(将jsp画面改造成纯静态html)结果上线失败,行内环境(IE8)登录页空白,生产环境(IE9)点击登录无反应。之前在测试的时候已经挖出了不少IE的坑,没想到到了上线的时候还是倒在了IE的魔爪下。带着深恶痛绝之情,我谨以此文痛诉IE的各路罪行!与广大前端开发者共勉!

 

----------------------------------------------------我是分割线--------------------------------------------------------

 

一、IE8 <meta>标签指定字符集时加载问题

  华夏行内浏览器访问静态化后的版本时,出现页面空白的现象。于是查看源代码,发现怎么都乱码了。按F12打开调试工具之后,发现网页的结构也不完整。title标签没有闭合,body里面的内容也是空的。

事后发现,原先jsp中是在<title>标签之上就通过<%@ pageEncoding="UTF-8">指定了字符集。

    而静态化后通过页面的<meta>标签指定,由于写在了<title>下面,所以title的中文被解析成了乱码,导致网页的标签都乱掉了无法解析。这个问题在IE9以上版本得到了修复,浏览器不再由上往下依次解析,而是先分析<meta>标签的字符集,再解析整个网页。不过为了对付IE8这个老怪兽,还是老实点把<meta>标签放在上面吧!

 

二、IE8/IE9在不开启调试模式时没有console对象

  公司楼下机房大多数浏览器都是IE9版本,当时代码上线后发现登录页面无法点击登录按钮。开启控制台输出的也是莫名其妙的错误,但一旦开启调试模式之后就一切正常。

  在度娘的指导下,总算抓住了真凶。原来页面的主流程中使用了console.log方法,而IE8、IE9两位大哥纷纷表示不认识:“console你谁啊?”,只有你开启了调试模式(调教模式),两兄弟才求饶:“认识了认识了!”而谁会没事经常打开调教模式,所以两兄弟经常绑架用户,js解析出错,导致页面崩溃。

  解决的办法就是在所有使用console函数的签名加一段条件判断语句"if(window.console&&window.console.log)"。先得礼貌一点问下IE大哥认识不?大哥才能饶你一命。

 

三、IE浏览器splice方法不同

  我们知道js里,处理数组有个splice方法。我们先看看splice方法的定义。

arrayObject.splice(index,howmany,item1,.....,itemX)

index表示数组的起始位置,howmany表示要删除的数量,后面的item表示要增加的数组项,方法的返回值是被删除的数组。注:该方法会直接修改原数组

我们经常使用arr.splice(1)的返回值用来截掉数组的第一位。(省略了howmany,默认会设置成最大)而这个方法在IE8中的定义并不是这样。IE8中howmany默认是0,这就导致了arr.splice(1)的返回值是空。

    在IE8下的结果:

    在IE9以上的结果

解决办法是使用slice方法替换:

 

四、IE8浏览器的<scrpit>标签没有onload事件

  之前静态化改造过程中,需要动态引入js。故需要动态生成script标签的。

而我想通过script标签的onload方法执行回调函数时,发现IE8浏览器下无法生效。打开调试模式发现script标签根本没有onload方法。

    度娘之后,找到了替代方法:

解决办法是通过判断script标签对象中是否存在onload方法来判断是使用onload事件处理回调还是通过onreadystatechange事件处理。

 

----------------------------------------------------我是分割线--------------------------------------------------------

    IE浏览器是银行系统的常用浏览器,历史悠久,有着深厚的文化底蕴(仗着MS为所欲为),我们要理解它、善待它、没准它就咬你一口,咬到你痛!