最近几个月一直在做IE升级的项目,在此,记录下项目中遇到的问题和解决方法。
首先项目原版本为IE8,要升级到的版本为IE11,由于IE在升级过程中不断的摒弃一些方法和更新一些方法,所以按照老版本IE编写的代码在新版本的IE上运行时会出现一些问题。这时候一般把方法改成最新的基本就可以了。
1.firstChild方法无法获取第一个标签
说明:其实不是没有获取到标签,而是在获取标签时,在第一个标签前,还存在着一个类似于空格符的text类型控件,所以firstchild会直接获取这个text。
解决方法:我一般使用childNodes[1]来跳过那一个text。
2.attachEvent方法出现错误
说明:在IE11中已经删除了attachEvent方法。
解决方法:使用addEventListener代替。同样的删除操作使用removeeventlistener方法。
3.document.all方法出现错误
说明:在IE11中已经删除了document.all方法
解决方法:使用document.getElementById方法获取。
4.页面出现一些标签的元素值无法获取的问题
说明:一般情况下是不会出现上述问题的,但是我修改的项目是2004-2007年左右的产物,所以不知道是不是那时候流行把JS语句或者调用JS的语句放在页面最上面,然后在页面初始化函数中进行了页面标签属性的查询&获取,这时候,由于页面初始化时从上往下的,所以会出现函数在查找&调用标签了,但是标签还没有初始化出来,所以会查不到相应的标签&属性,所以报错。
解决方法:很简单,把JS语句或者调用语句放到页面最下方,等页面初始化完成即可,还有尽量不要把JS语句写到JSP页面中,这样写会拖慢网页速度。
5.HierarchyRequestError错误 appendChild相关
说明:这个的实际原因我也不是很清楚。我遇到的错误是document.appendChild(html语句)这样的写法出错;网上还有另一种出错情况,就是append(xxx.append())这样的套层写法,这个只要把里面的append()拿出来,在外面调用就行。
解决办法:我遇到的情况是添加一个body,如document.body.appendChild(html语句)。
6.disabled属性
说明:一般情况下,改变一个标签的disabled属性可以直接使用document.标签名.disabled=true/false 就行,true表示不可用,false表示可用。但是如果使用”true/false”时两者并无区别,都是不可用状态,可以使用 “” 来设置为可用状态。
在页面中调试时,IE11的 F12调试页面,不管怎么修改标签中的disabled,都不会改变页面上标签的状态,这时候在CSS中修改可以立即改变状态,不知道这是为什么,可以用来调试时使用,修改的坏还是要到页面原代码中修改。同样的display也会出现类似上面的情况。
1.13
7.document.body.fireEvent('onmousedown');失效
说明:具体不是很了解,IE的新版本对该方法的兼容性不好,也有可能该方法已被删除
解决方法:
使用如下代码替换即可:
var evt3 = document.createEvent("MouseEvents");
evt3.initMouseEvent("'onmousedown", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.body.dispatchEvent(evt3);
2.18
8.form表单的提交
说明:由于这个问题是非常非常基础的,所以也容易忘记,就是在form表单中,使用button标签时,会默认点击button后提交表单。就像我遇到的那样,项目里的select标签是公司自己自定义写的(用text文本框,input标签,button标签来模拟select标签),在ie8上点击下拉框正常,在ie11下就直接提交表单了。
修改方法:使用其他的标签来模拟button即可,或者使用js来阻止点击button后提交表单。
2.25
9.childNodes[0]获取不到子标签
说明:在ie11中,由于该方法获取子元素时,会将空格符等也当成标签进行获取,所以会出现想要获取一个标签的第一个子标签时无法获得的情况。
解决办法:使用childNodes[1],一般来说获取的空格符只会有一个,所以可以向后一位去取值就能找到第一个子标签了。
不断更新中…
由于调换项目组,所以暂时停止更新