深入解析IE11中被废止的JS方法

深入解析IE11中被废止的方法尽管我们已经了解了InternetExplorer11中的一些新特性，包括对WebGL的支持、预抓取、预渲染、flexbox、mutationobservers以及其他一些Web标准的支持，特别是废弃了一些非标准的方法，这对一些较早开发的应用，产生了严重影响，甚至不能正常使用。尽管可以使用IE11中的兼容性视图，但总是感觉不太理想。至于到底有哪些变化，不经过实践验证，总是不能深入。最近，因为项目需要，升级了前几年开发的一套WEB应用系统，使其能够适应IE11。在升级过程中，较为深入的了解了IE11与较早版本的一些区别，以及需要修改那些地方才能适应IE11。现整理出来一部分，供需要的同行参考。IE11已经不再是IE了这也是微软首次真正移除了InternetExplorer的一些特性，转而对Web标准的支持更好。特别是更改了user-agent字符串，这使得很多判断浏览器是否IE的代码无法工作，包括有些JavaScript的isIE()的方法在InternetExplorer11上执行会返回false。在IE11中，user-agent比之前的版本要短很多，而且去掉了最关键的MSIE的关键字(这在IE10中还有)：InternetExplorer11的user-agent:Mozilla/5.0(WindowsNT6.3;Trident/7.0;rv11.0)likeGecko鉴于此，之前多数使用MSIE来判断是否IE浏览器的代码都无法工作。此外微软还更改了navigator对象：navigator.appName值为“Netscape”，而navigaduct值为“Gecko”，据说这样修改为了满足HTML5而进行的，是HTML5中实际指定的。在HTML5中要求这两个属性必须返回上述对应的值，显然IE11遵守了这个规定。此举导致一些根据navigator对象判断浏览器型号的JavaScript代码会将IE11识别成基于Gecko的浏览器。下面的代码可以用来判断不同的浏览器以及他们的版本：//浏览器版本信息window.GLOBAL={BROWSER:(function。{varu=window.navigator.userAgent.toLocaleLowerCase(),msie=/(msie)([\d.]+)/,chrome=/(chrome)\/([\d.]+)/,firefox=/(firefox)\/([\d.]+)/,safari=/(safari)\/([\d.]+)/,opera=/(opera)\/([\d.]+)/,iell=/(trident)\/([\d.]+)/,//match方法返回的是数组，0个元素是匹配的完整表达式，1和2个是匹配的子表达式b=u.match(msie)||u.match(chrome)||u.match(firefox)||u.match(safari)||u.match(opera)||u.match(iell);return{NAME:b[1],VERSION:parselnt(b[2])};})()}获取的的时候使用：window.GLOBAL.BROWSER.NAME；window.GLOBAL.BROWSER.VERSION);//注意，IE11的版本是trident,版本是7；如果仅仅是想判断是不是IE(包括早期版本)，另一种办法是判断能不能实例化ActiveXObject：VarIsIE=!!window.ActiveXObject||"ActiveXObject"inwindowdocumentall不被推荐从IE4开始，document.all在IE中举足轻重。比起document.getElementById()来说，document.all是IE方式的获取元素的引用的方法。尽管IE5增加对DOM的支持，但document.all—直沿用至IE10。在InternetExplorer11中document.all并没有真正被删除，但不推荐使用。document.all这种方法有一个十分讨厌的问题，即当元素只有一个时，Document.all.elementName[0]会报出异常，需要用Document.all.elementName直接获取；而document.getElementsByName(“elementName”)[0]则不会，因此，在你不能确定有多少个元素时(有可能没有或者只有一个)，显然使用document.getElementsByName更为通用。attachEventO方法被废弃该方法用于添加事件处理器，对应的detachEvent()用来移除事件处理器。这两个方法将在InternetExplorer11中删除。移除这两个方法需要改用如下逻辑：FunctiaraddEvent(elementtype^handle■-J■{if(element.attachEvertJ){element.attachEvent("cn"+type.hhandle-);'■elseif(element.addEvent_istene-)-[亡].亡ment.addEvent_isl亡ri亡「(七¥|0亡」handle->false);?7|:其他被删除的特性还包括：window.execScript()-IE版本的eval()window.doScroll()-IE用来滚动窗口的方式script.onreadystatechange-IE方式的脚本加载完成的事件通知script.readyState-IE方式的测试脚本是否加载完成的状态document.selection-IE方式获取当前选择的文本，改document.getSelection()document.createStyleSheet-IE方式创建样式单style.styleSheet-IE方式引用样式所有这些被废弃的方法都有基于标准的替代方法。HTML书写严格规范早期的浏览器版本，能够容忍一些HTML代码的不规范。如style二”display:none”，

不能写成style=”display:'none'”。这种写法在IE较早版本没有问题，IE11不行了。innerText不被推荐使用以前，我们经常使用innerText来获取元素所包含的文本内容，如获取单元格内容用document.getElementById(“td”).innerText,IE11中已经不被推荐使用了。innerText其本身就是微软自己发明的东东，改邪归正总是好的，取代的办法是改用innerHTML。但需要注意的是，如果含有子标签，innerHTML会将子标签一块输出的。如：<tdid=”mytd”><span>1234</span></td>Document.getElememtById(“mytd”).innerHTML的输出值为：<span>1234</span>元素的id和name同时存在如果元素只有id,没有name,document.getElementsByName()会为空，引发异常。在ie10以前版本，document.getElementsByName()取不到name，就会去取id，只要id存在就可以°IE11显然要求更加规范。firstChild和nextSibling在标准的javascrip中，空格(缩进的空格)也被算作节点，因此经常性会有空节点,如：<tableid=”tb”><tr><td>1234</td><td>5678</td></tr></table>这时使用document.getElementById(“tb”).firstChild.firstChild.innerHTML时，会报对象为空异常，这在IE以前版本是可以取到值1234的。解决办法：1、 使用document.getElementById(“tb”).firstChild.nodeType进行判断，为3时是空格2、 document.getElementsById(“tb”). getElementsByTagName("td")[0].innerHTML来代替3、 同样道理，nextSibling用来获取同级节点的下一个节点，以前可以用document.getElementById(“tb").firstChild.nextSibling.innerHTML来获取5678，现在需要用循环或数组来获取下一个节点的内容：document.getElementsById(“tb”).getElementsByTagName("td")[1].innerHTML4、 使用Jquery没有这个问题，会自动去掉空格节点不再支持ExpressionIE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果,这看起来是一件十分美妙的事情，可以帮助我们处理很多事情，但CSSExpression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次，对浏览器性能还是有压力的。现在，这样的事在ie11终结了。在ie11中不能使用了，需要将JS代码或函数移到外边来。onscroll滚动条事件IE早期版本中，把onscroll放在body中是可以执行的，例如：<bodyonscroll=”myFunction()”>现在IE11中不行了。需要单独注册监听，例如写成：window.onscroll=function(){myFunction();Form中vbutton＞按钮<buttononClick二”myFunction()”〉这是按钮〈/button〉上面这样的按钮如果在form之外，没有什么问题，但如果在form中，在IE较早版本没发现什么，点击仅仅执行myFunction()函数，但是在IE11中，问题严重了，点击此按钮，不但执行myFunction()函数，而且立马提交form表单。如果你设定了提交严查，这样的提交根本不会被检查而直接提交，你敢说问题不严重？解决的办法是使用〈inputtype二”button”value二”这是按钮”onClick二”myFunction()”〉来代替。另外，在早前版本中，下面的用法是可以正常显示的<buttonvalue=”这是按钮”></button〉IE11不能这样写了，要写成下面这样才能正常显示：<buttonvalue二””〉这是按钮〈/button〉window.ActiveXObject在IE早期版本中，window.ActiveXObject返回是true,IE11中不是这样了，返回的是一串这样的字符：functionActiveXObject(){[nativcode]}，显然，仅以此来判断是不是IE肯定不行了，考虑到对早期IE版本的兼容性，在创建ajax实例对象时，建议使用下面的方法来判断：if(!!window.ActiveXObject||"ActiveXObject"inwindow){http_request=newActiveXObject("Microsoft.XMLHTTP");}else{http_request=newXMLHttpRequest();}框架页JS函数的执行问题在框架页上，如果有自动执行的JS函数，要放在页面的上面部分，不能放在最后面,否则不能自行启动。这种情况在IE早期版本中并无问题，在IE11中却不行。参见下图：51451551651T5185195ZQ52151451551651T5185195ZQ5215225235245255Z65275Z85295305315325335閱53553653753E539540写在这里才行start();window・onunload=fToroC1ose0..</Bcript></head>自启动函数写在这里不能自动运行</N0FRA«E2>functioncheckFraneC)[if(lcftF'Tanir.dDcuirem.rr-adyStal亡="亡口陀1亡t亡"|IrightFrame,docunirnt.r亡凸也喘！:也1:亡="匚口叩1亡上亡"){cleisrlnlErral(bEglnTiTer);fromSetIntervalt).:旳]"bBginTimer;function,siart(){b-eeinTiiTcr-windoK1・g已tIntervalC^checkFrame0：5003;<fTsanE2etcols=-w4&!4?52ft'frsmeborder='yl■*barTer二"(f*ftsniE2F.aeing=<'3'*><frairesr<="：^ynamiclnfoFIList.j5t>?Dt>eratorUserlii=<S=ov-cratorUstrldKMEaiziOTt=<naine=leftFrame><fraireerc="■^ynamlsinfoFOList.jst>?Dt>eratorUserld=<%=operatorUserId%Mesport=wnau)e='，rlghlFrajre，M>■C/framesEl>曲iFRAflffi略tboiiyt onllnload=，，J，frojTClq<e0◎此网页使用了框架，但您的剎览器不支持彳蹂"</?>window.navigate不被推荐window.navigate(url)在IEll中将不再推荐使用但仍然可以用，建议改用标准window.location.href=url来实现页面跳转或者刷新。关于scroll处理滚动条控制页面是否出现滚动条，可以使用〈bodyscroll=”no/auto”〉，但这个属性方法我并未在W3C标准中找到，但在IEll中确实是可用的。尽管如此，我还是建议使用更为通用的办法：〈bodystyle二"overflow:scroll;overflow-y:hidden"〉//去掉竖滚动条<bodystyle二"overflow:scroll;overflow-x:hidden"〉//去掉横滚动条<bodystyle二"overflow:hidden"〉//全部去掉或者使用css：body{overflow:auto;overflow-x:hidden}关于获取CSS内部属性之前的IE版本只能使用下面方法获取元素内部css的属性值：varcomputedStyle=obj.currentStyle;alert(computedStyle.paddingLeft);现在，IEll已经支持标准的js方法，同时也保留了原来的方法varcomputedStyle=document.defaultView.getComputedStyle(obj,null);alert(computedStyle.paddingLeft);如果考虑到对以前版本的支持，可以同时使用这两种方法。关于获取元素宽度长度计算的问题在IE10之前的版本中，使用document.getElementById(“name”).style.width等方法获得的数据为数值型，因此可以相加减；IE11则采用标准做法，返回的是数字+px，是个字符串，不能直接做加减法了，需要使用replace将“px”去掉后再进行数学计算。关于select中size与height在早期IE版本中，select多行列表时，size可以与height同时存在，但会以size为主，也就是说，浏览器会取这两个值中较大的一个(size会被换算为高度px值)。IE11中情况发生变化了,height会被优先采用，而不会考虑size，因此这两个值设置时要注意，有size时，不要再设置height了。不再支持VBScript从IE11开始已经不再支持VBScript作为前端脚本了，所以很遗憾，要么把IE降级，要么改用javascript。关于使用CSS实现渐变在IE11以前，ie有自己的渐变滤镜，即filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#378de5',GradientType=0)在IE11已经不支持这个滤镜了，改为使用：background：-msTinear-gradient(top,#79bbff5%,#378de5100%);一般情况下，为了适应各类型浏览器，建议使用以下CSS.linear{background：-webkit-gradient(linear,lefttop,leftbottom,color-start(0.05,#79bbff),color-stop(1,#378de5));background：-moz-linear-gradient(top,#79bbff5%,#378de5100%);background：-o-linear-gradient(top,#79bbff5%,#378de5100%);background：-ms-linear-gradient(top,#79bbff5%,#378de5100%);background：linear-gradient(tobottom,#79bbff5%,#378de5100%);background：-webkit-linear-gradient(top,#79bbff5%,#378de5100%);filter：progid：DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#378de5',GradientType=0);}IE11不再支持条件性注释IE11不再支持条件性注释，下面代码不会被执行<!--[ifIE6]><styletype="text/css">/*stylesforIE6goeshere*/</style><![endif]-->showModalDialog打开框架页窗口太小IE11中，使用showModalDialog(也包括showModalLessDialog)时，窗口很小(有框架的页)，并且设置dialogHeight:和dialogWidth均不管用，不知道为什么，我的处理办法是要么改成window.open()来代替，要么在框架页中加上〈metahttp-equiv二"x-ua-compatible"content二"IE=7"〉这实际上是告诉浏览器，回退到ie7去处理该页面，这显然并不理想。网上有种说法：“这其实是标准的问题，iell更加标准化，frameset走的是XHTML1.0Frameset,如果用其它协议可能出现此类问题，把Frameset页面的D0CTYPE改为frameset协议或者直接把D0CTYPE这一行删除即可。”对此，我试了试，没好使。想必showModalDialog毕竟是IE独有的东西，一直没纳入W3C标准，或许未来某一天就被废弃了。看来，还是少用为妙。突然想到可不可以在被打开的页面中，使用下面代码控制或者resize()以下，我不想用了，所以没有试过行不行，感兴趣的朋友可以试一下：〈script〉window.dialogHeight=document.body.scrollHeight+"px";window.dialogWidth=document.body.scrollWidth+"px";〈/script〉html5删除了frame和frameset这个本来和IE11没啥关系，但既然碰到了这个问题，同时也怀疑前面的那个问题可能与此有关，也写在这里吧。html5删除了frame和frameset等元素，添加了article、etailist、igure、ooter、header、nav、section、source等新元素。但iframe被保留了，至于保留到什么时候，没人知道。有人建议使用div+css(主要是div的float属性来布局)或者iframe来代替frameset。但ifra