深入解析IE11中被废止的方法
尽管我们已经了解了Internet Explorer 11中的一些新特性，包括对WebGL的支持、预抓取、预渲染、flexbox、mutation observers 以及其他一些Web标准的支持，特别是废弃了一些非标准的方法，这对一些较早开发的应用，产生了严重影响，甚至不能正常使用。尽管可以使用IE11中的兼容性视图，但总是感觉不太理想。至于到底有哪些变化，不经过实践验证，总是不能深入。最近，因为项目需要，升级了前几年开发的一套WEB应用系统，使其能够适应IE11。在升级过程中，较为深入的了解了IE11与较早版本的一些区别，以及需要修改那些地方才能适应IE11。现整理出来一部分，供需要的同行参考。
IE11已经不再是IE了
这也是微软首次真正移除了Internet Explorer的一些特性，转而对Web标准的支持更好。特别是更改了user-agent 字符串，这使得很多判断浏览器是否IE的代码无法工作，包括有些 JavaScript 的 isIE() 的方法在Internet Explorer 11上执行会返回 false。在IE11中，user-agent 比之前的版本要短很多，而且去掉了最关键的MSIE的关键字（这在IE10中还有）：
Internet Explorer 11 的 user-agent:
Mozilla/ (Windows NT ; Trident/; rv  like Gecko
鉴于此，之前多数使用 MSIE 来判断是否IE浏览器的代码都无法工作。
此外微软还更改了navigator 对象： 值为 “Netscape”，而 值为 “Gecko”，据说这样修改为了满足HTML5而进行的，是 HTML5 中实际指定的。在 HTML5 中要求这两个属性必须返回上述对应的值，显然IE 11遵守了这个规定。此举导致一些根据navigator 对象判断浏览器型号的JavaScript 代码会将IE11识别成基于Gecko的浏览器。下面的代码可以用来判断不同的浏览器以及他们的版本：
+)/,
        chrome = /(chrome)\/([\d.]+)/,
        firefox = /(firefox)\/([\d.]+)/,
        safari = /(safari)\/([\d.]+)/,
        opera = /(opera)\/([\d.]+)/,
        ie11 = /(trident)\/([\d.]+)/,
//match方法返回的是数组，0个元素是匹配的完整表达式，1和2个是匹配的子表达式
b=(msie)||(chrome)||(firefox)||(safari)||(opera)||(ie11);
    return {NAME: b[1], VERSION: parseInt(b[2])};
})()
}
获取的的时候使用：
；
注意，IE11的版本是trident，版本是7；
如果仅仅是想判断是不是IE（包括早期版本），另一种办法是判断能不能实例化ActiveXObject：
Var IsIE= !! || "ActiveXObject" in window
不被推荐
从IE4 开始， 在IE中举足轻重。比起 () 来说， 是IE方式的获取元素的引用的方法。尽管IE
5增加对DOM的支持，但  一直沿用至IE10。在Internet Explorer 11中 并没有真正被删除，但不推荐使用。这种方法有一个十分讨厌的问题，即当元素只有一个时，会报出异常，需要用直接获取；而(“elementName”)[0]则不会，因此，在你不能确定有多少个元素时（有可能没有或者只有一个），显然使用更为通用。
attachEvent()方法被废弃
该方法用于添加事件处理器，对应的 detachEvent() 用来移除事件处理器。这两个方法将在Internet Explorer 11中删除。移除这两个方法需要改用如下逻辑：
其他被删除的特性还包括：
() –IE版本的 eval()() –IE用来滚动窗口的方式 –IE方式的脚本加载完成的事件通知 –IE方式
的测试脚本是否加载完成的状态 –IE方式获取当前选择的文本，改() –IE方式创建样式单 –IE方式引用样式
所有这些被废弃的方法都有基于标准的替代方法。
HTML书写js控制滚动条严格规范
早期的浏览器版本，能够容忍一些HTML代码的不规范。如style=”display:none”，不能写成style=”display:‘none’”。这种写法在IE较早版本没有问题，IE11不行了。
innerText不被推荐使用
以前，我们经常使用innerText来获取元素所包含的文本内容，如获取单元格内容用(“td”).innerText,IE11中已经不被推荐使用了。innerText其本身就是微软自己发明的东东，改邪归正总是好的，取代的办法是改用innerHTML。但需要注意的是，如果含有子标签，innerHTML会将子标签一块输出的。如：
<td id=”mytd”><span>1234</span></td>
(“mytd”).innerHTML的输出值为：
<span>1234</span>
元素的id和name同时存在
如果元素只有id，没有name, ()会为空，引发异常。在ie10以前版本，()取不到name，就会去取id，只要id存在就可以。IE11显然要求更加规范。
firstChild和nextSibling
在标准的javascrip中，空格（缩进的空格）也被算作节点，因此经常性会有空节点，如：
<table id=”tb”>
<tr>
  <td>1234</td>
<td>5678</td>
</tr>
</table>
这时使用(“tb”).时，会报对象为空异常，这在IE以前版本是可以取到值1234的。
解决办法：
1、 使用(“tb”).进行判断，为3时是空格
2、 (“tb”). getElementsByTagName("td")[0]. innerHTML来代替
3、 同样道理，nextSibling用来获取同级节点的下一个节点，以前可以用
(“tb”).firstChild. 来获取5678，现在需要用循环或数组来获取下一个节点的内容：
(“tb”). getElementsByTagName("td")[1].innerHTML
4、 使用Jquery没有这个问题，会自动去掉空格节点
不再支持Expression
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果，这看起来是一件十分美妙的事情，可以帮助我们处理很多事情，但CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次，对浏览器性能还是有压力的。现在，这样的事在ie11终结了。在ie11中不能使用了，需要将JS代码或函数移到外边来。
onscroll滚动条事件
IE早期版本中，把onscroll放在body中是可以执行的，例如：
<body onscroll=” myFunction()”>
现在IE11中不行了。需要单独注册监听，例如写成：
= function(){
    myFunction();
}
Form中<button>按钮
<button onClick=”myFunction()”>这是按钮</button>
上面这样的按钮如果在form之外，没有什么问题，但如果在form中，在IE较早版本没发现什么，点击仅仅执行myFunction()函数，但是在IE11中，问题严重了，点击此按钮，不但执行myFunction()函数，而且立马提交form表单。如果你设定了提交严查，这样的提交根本不会被检查而直接提交，你敢说问题不严重解决的办法是使用<input type=”button” value=” 这是按钮” onClick=” myFunction()”>来代替。
另外，在早前版本中，下面的用法是可以正常显示的
<button value=”这是按钮”></button>
IE11不能这样写了，要写成下面这样才能正常显示：
<button value=””>这是按钮</button>
在IE早期版本中，返回是true，IE11中不是这样了，返回的是一串这样的字符：function ActiveXObject(){[nativ code]}，显然，仅以此来判断是不是IE肯定不行了，考虑到对早期IE版本的兼容性，在创建ajax实例对象时，建议使用下面的方法来判断：
if(!! || "ActiveXObject" in window){
  http_request = new ActiveXObject("");
}else{
  http_request = new XMLHttpRequest();
}
框架页JS函数的执行问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。