深入解析IE中被廢止的JS方法

1、深入解析IE11中被廢止的方法盡管我們已經(jīng)了解了Internet Explorer 11中的一些新特性，包括對(duì)WebGL的支持、預(yù)抓取、預(yù)渲染、flexbox、mutation observers 以及其他一些Web標(biāo)準(zhǔn)的支持，特別是廢棄了一些非標(biāo)準(zhǔn)的方法，這對(duì)一些較早開發(fā)的應(yīng)用，產(chǎn)生了嚴(yán)重影響，甚至不能正常使用。盡管可以使用IE11中的兼容性視圖，但總是感覺不太理想。至于到底有哪些變化，不經(jīng)過實(shí)踐驗(yàn)證，總是不能深入。最近，因?yàn)轫?xiàng)目需要，升級(jí)了前幾年開發(fā)的一套WEB應(yīng)用系統(tǒng)，使其能夠適應(yīng)IE11。在升級(jí)過程中，較為深入的了解了IE11與較早版本的一些區(qū)別，以及需要修改那些地方才能適應(yīng)IE11。

2、現(xiàn)整理出來一部分，供需要的同行參考。IE11已經(jīng)不再是IE了這也是微軟首次真正移除了Internet Explorer的一些特性，轉(zhuǎn)而對(duì)Web標(biāo)準(zhǔn)的支持更好。特別是更改了user-agent 字符串，這使得很多判斷瀏覽器是否IE的代碼無法工作，包括有些 JavaScript 的 isIE() 的方法在Internet Explorer 11上執(zhí)行會(huì)返回 false。在IE11中，user-agent 比之前的版本要短很多，而且去掉了最關(guān)鍵的MSIE的關(guān)鍵字（這在IE10中還有）：Internet Explorer 11 的 user-agent:Mozilla/5.0 (Windows NT

3、6.3; Trident/7.0; rv 11.0) like Gecko鑒于此，之前多數(shù)使用 MSIE 來判斷是否IE瀏覽器的代碼都無法工作。 此外微軟還更改了navigator 對(duì)象：navigator.appName 值為 “Netscape”，而duct 值為 “Gecko”，據(jù)說這樣修改為了滿足HTML5而進(jìn)行的，是 HTML5 中實(shí)際指定的。在 HTML5 中要求這兩個(gè)屬性必須返回上述對(duì)應(yīng)的值，顯然IE 11遵守了這個(gè)規(guī)定。此舉導(dǎo)致一些根據(jù)navigator 對(duì)象判斷瀏覽器型號(hào)的JavaScript 代碼會(huì)將IE11識(shí)別成基于Gecko的瀏覽器。下面的代碼

4、可以用來判斷不同的瀏覽器以及他們的版本：/瀏覽器版本信息window.GLOBAL = BROWSER : (function() var u = window.navigator.userAgent.toLocaleLowerCase(), msie = /(msie) (d.+)/, chrome = /(chrome)/(d.+)/, firefox = /(firefox)/(d.+)/, safari = /(safari)/(d.+)/, opera = /(opera)/(d.+)/, ie11 = /(trident)/(d.+)/,/match方法返回的是數(shù)組，0個(gè)元素是匹配

5、的完整表達(dá)式，1和2個(gè)是匹配的子表達(dá)式b=u.match(msie)|u.match(chrome)|u.match(firefox)|u.match(safari)|u.match(opera)|u.match(ie11); return NAME: b1, VERSION: parseInt(b2); )()獲取的的時(shí)候使用： ；window.GLOBAL.BROWSER.VERSION);/注意，IE11的版本是trident，版本是7；如果僅僅是想判斷是不是IE（包括早期版本），另一種辦法是判斷能不能實(shí)例化ActiveXObject：Var IsIE= !window.ActiveXO

6、bject | "ActiveXObject" in windowdocument.all不被推薦從IE4 開始，document.all 在IE中舉足輕重。比起 document.getElementById() 來說，document.all 是IE方式的獲取元素的引用的方法。盡管IE5增加對(duì)DOM的支持，但 document.all 一直沿用至IE10。在Internet Explorer 11中document.all 并沒有真正被刪除，但不推薦使用。document.all這種方法有一個(gè)十分討厭的問題，即當(dāng)元素只有一個(gè)時(shí)，Document.all.elementN

7、ame0會(huì)報(bào)出異常，需要用Document.all.elementName直接獲??；而document.getElementsByName(“elementName”)0則不會(huì)，因此，在你不能確定有多少個(gè)元素時(shí)（有可能沒有或者只有一個(gè)），顯然使用document.getElementsByName更為通用。attachEvent()方法被廢棄該方法用于添加事件處理器，對(duì)應(yīng)的 detachEvent() 用來移除事件處理器。這兩個(gè)方法將在Internet Explorer 11中刪除。移除這兩個(gè)方法需要改用如下邏輯：其他被刪除的特性還包括：window.execScript() IE版本的 ev

8、al()window.doScroll() IE用來滾動(dòng)窗口的方式script.onreadystatechange IE方式的腳本加載完成的事件通知script.readyState IE方式的測(cè)試腳本是否加載完成的狀態(tài)document.selection IE方式獲取當(dāng)前選擇的文本，改document.getSelection()document.createStyleSheet IE方式創(chuàng)建樣式單style.styleSheet IE方式引用樣式所有這些被廢棄的方法都有基于標(biāo)準(zhǔn)的替代方法。HTML書寫嚴(yán)格規(guī)范早期的瀏覽器版本，能夠容忍一些HTML代碼的不規(guī)范。如style=”displa

9、y:none”，不能寫成style=”display:none”。這種寫法在IE較早版本沒有問題，IE11不行了。innerText不被推薦使用以前，我們經(jīng)常使用innerText來獲取元素所包含的文本內(nèi)容，如獲取單元格內(nèi)容用document.getElementById(“td”).innerText,IE11中已經(jīng)不被推薦使用了。innerText其本身就是微軟自己發(fā)明的東東，改邪歸正總是好的，取代的辦法是改用innerHTML。但需要注意的是，如果含有子標(biāo)簽，innerHTML會(huì)將子標(biāo)簽一塊輸出的。如：<td id=”mytd”><span>1234</sp

10、an></td>Document.getElememtById(“mytd”).innerHTML的輸出值為：<span>1234</span>元素的id和name同時(shí)存在如果元素只有id，沒有name, document.getElementsByName()會(huì)為空，引發(fā)異常。在ie10以前版本，document.getElementsByName()取不到name，就會(huì)去取id，只要id存在就可以。IE11顯然要求更加規(guī)范。firstChild和nextSibling在標(biāo)準(zhǔn)的javascrip中，空格（縮進(jìn)的空格）也被算作節(jié)點(diǎn)，因此經(jīng)常性會(huì)有空節(jié)點(diǎn)

11、，如：<table id=”tb”><tr> <td>1234</td><td>5678</td></tr></table>這時(shí)使用document.getElementById(“tb”).firstChild.firstChild.innerHTML時(shí)，會(huì)報(bào)對(duì)象為空異常，這在IE以前版本是可以取到值1234的。解決辦法：1、 使用document.getElementById(“tb”).firstChild.nodeType進(jìn)行判斷，為3時(shí)是空格2、 document.getElementsB

12、yId(“tb”). getElementsByTagName("td")0. innerHTML來代替3、 同樣道理，nextSibling用來獲取同級(jí)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)，以前可以用document.getElementById(“tb”).firstChild. nextSibling.innerHTML來獲取5678，現(xiàn)在需要用循環(huán)或數(shù)組來獲取下一個(gè)節(jié)點(diǎn)的內(nèi)容：document.getElementsById(“tb”). getElementsByTagName("td")1.innerHTML4、 使用Jquery沒有這個(gè)問題，會(huì)自動(dòng)去掉空格節(jié)點(diǎn)

13、不再支持ExpressionIE5及其以后版本支持在CSS中使用expression，用來把CSS屬性和Javascript表達(dá)式關(guān)聯(lián)起來，這里的CSS屬性可以是元素固有的屬性，也可以是自定義屬性。就是說CSS屬性后面可以是一段Javascript表達(dá)式，CSS屬性的值等于Javascript表達(dá)式計(jì)算的結(jié)果，這看起來是一件十分美妙的事情，可以幫助我們處理很多事情，但CSS Expression的問題就在于它的計(jì)算頻率要比想象的多出很多。不僅僅是在頁面顯示和縮放時(shí)，就是在頁面滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)都會(huì)要重新計(jì)算一次，對(duì)瀏覽器性能還是有壓力的?，F(xiàn)在，這樣的事在ie11終結(jié)了。在ie11中不能使用了

14、，需要將JS代碼或函數(shù)移到外邊來。onscroll滾動(dòng)條事件IE早期版本中，把onscroll放在body中是可以執(zhí)行的，例如：<body onscroll=” myFunction()”>現(xiàn)在IE11中不行了。需要單獨(dú)注冊(cè)監(jiān)聽，例如寫成：window.onscroll = function()myFunction();Form中<button>按鈕<button onClick=”myFunction()”>這是按鈕</button>上面這樣的按鈕如果在form之外，沒有什么問題，但如果在form中，在IE較早版本沒發(fā)現(xiàn)什么，點(diǎn)擊僅僅執(zhí)行myF

15、unction()函數(shù)，但是在IE11中，問題嚴(yán)重了，點(diǎn)擊此按鈕，不但執(zhí)行myFunction()函數(shù)，而且立馬提交form表單。如果你設(shè)定了提交嚴(yán)查，這樣的提交根本不會(huì)被檢查而直接提交，你敢說問題不嚴(yán)重？解決的辦法是使用<input type=”button” value=” 這是按鈕” onClick=” myFunction()”>來代替。另外，在早前版本中，下面的用法是可以正常顯示的<button value=”這是按鈕”></button>IE11不能這樣寫了，要寫成下面這樣才能正常顯示：<button value=”>這是按鈕<

16、/button>window.ActiveXObject在IE早期版本中，window.ActiveXObject返回是true，IE11中不是這樣了，返回的是一串這樣的字符：function ActiveXObject()nativ code，顯然，僅以此來判斷是不是IE肯定不行了，考慮到對(duì)早期IE版本的兼容性，在創(chuàng)建ajax實(shí)例對(duì)象時(shí)，建議使用下面的方法來判斷：if(!window.ActiveXObject | "ActiveXObject" in window) http_request = new ActiveXObject("Microsoft.

17、XMLHTTP");else http_request = new XMLHttpRequest();框架頁JS函數(shù)的執(zhí)行問題在框架頁上，如果有自動(dòng)執(zhí)行的JS函數(shù)，要放在頁面的上面部分，不能放在最后面，否則不能自行啟動(dòng)。這種情況在IE早期版本中并無問題，在IE11中卻不行。參見下圖:自啟動(dòng)函數(shù)寫在這里不能自動(dòng)運(yùn)行寫在這里才行window.navigate不被推薦window.navigate(url)在IE11中將不再推薦使用但仍然可以用，建議 =url來實(shí)現(xiàn)頁面跳轉(zhuǎn)或者刷新。關(guān)于scroll處理滾動(dòng)條控制頁面是否出現(xiàn)滾動(dòng)條，可以使用<body scroll=”no/

18、auto”>，但這個(gè)屬性方法我并未在W3C標(biāo)準(zhǔn)中找到，但在IE11中確實(shí)是可用的。盡管如此，我還是建議使用更為通用的辦法：<body style="overflow:scroll;overflow-y:hidden">/去掉豎滾動(dòng)條<body style="overflow:scroll;overflow-x:hidden">/去掉橫滾動(dòng)條<body style="overflow:hidden">/全部去掉或者使用css：body overflow:auto;

19、overflow-x:hidden關(guān)于獲取CSS內(nèi)部屬性之前的IE版本只能使用下面方法獲取元素內(nèi)部css的屬性值：var computedStyle = obj.currentStyle;alert(computedStyle.paddingLeft);現(xiàn)在，IE11已經(jīng)支持標(biāo)準(zhǔn)的js方法，同時(shí)也保留了原來的方法var computedStyle = document.defaultView.getComputedStyle(obj, null);alert(computedStyle.paddingLeft);如果考慮到對(duì)以前版本的支持，可以同時(shí)使用這兩種方法。關(guān)于獲取元素寬度長度計(jì)算的問題

20、在IE10之前的版本中，使用document.getElementById(“name”).style.width等方法獲得的數(shù)據(jù)為數(shù)值型，因此可以相加減；IE11則采用標(biāo)準(zhǔn)做法，返回的是數(shù)字+px，是個(gè)字符串，不能直接做加減法了，需要使用replace將“px”去掉后再進(jìn)行數(shù)學(xué)計(jì)算。關(guān)于select 中size與height在早期IE版本中，select多行列表時(shí)，size可以與height同時(shí)存在，但會(huì)以size為主，也就是說，瀏覽器會(huì)取這兩個(gè)值中較大的一個(gè)（size會(huì)被換算為高度px值）。IE11中情況發(fā)生變化了，height會(huì)被優(yōu)先采用，而不會(huì)考慮size，因此這兩個(gè)值設(shè)置時(shí)要注意，有

21、size時(shí)，不要再設(shè)置height了。不再支持VBScript從IE11開始已經(jīng)不再支持VBScript作為前端腳本了，所以很遺憾，要么把IE降級(jí)，要么改用javascript。關(guān)于使用CSS實(shí)現(xiàn)漸變?cè)贗E11以前，ie有自己的漸變?yōu)V鏡，即filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#378de5',GradientType=0)在IE11已經(jīng)不支持這個(gè)濾鏡了，改為使用：background:-ms-linear-gradient(t

22、op, #79bbff 5%, #378de5 100%);一般情況下，為了適應(yīng)各類型瀏覽器，建議使用以下CSS.linear background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5); background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);

23、 background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff',endColorstr='#378de

24、5',GradientType=0);IE11不再支持條件性注釋IE11不再支持條件性注釋，下面代碼不會(huì)被執(zhí)行<!-if IE6><style type="text/css">/* styles for IE6 goes here */</style><!endif->showModalDialog打開框架頁窗口太小IE11中，使用showModalDialog（也包括showModalLessDialog）時(shí)，窗口很?。ㄓ锌蚣艿捻摚?，并且設(shè)置dialogHeight:和dialogWidth均不管用，不知道為什么，我

25、的處理辦法是要么改成window.open()來代替，要么在框架頁中加上<meta http-equiv="x-ua-compatible" content="IE=7">這實(shí)際上是告訴瀏覽器，回退到ie7去處理該頁面，這顯然并不理想。網(wǎng)上有種說法：“這其實(shí)是標(biāo)準(zhǔn)的問題，ie11更加標(biāo)準(zhǔn)化，frameset走的是 XHTML 1.0 Frameset，如果用其它協(xié)議可能出現(xiàn)此類問題，把Frameset 頁面的DOCTYPE改為frameset協(xié)議或者直接把DOCTYPE 這一行刪除即可?！睂?duì)此，我試了試，沒好使。想必showModalDial

26、og畢竟是IE獨(dú)有的東西，一直沒納入W3C標(biāo)準(zhǔn)，或許未來某一天就被廢棄了?？磥恚€是少用為妙。突然想到可不可以在被打開的頁面中，使用下面代碼控制或者resize()以下，我不想用了，所以沒有試過行不行，感興趣的朋友可以試一下：<script> window.dialogHeight=document.body.scrollHeight+"px" window.dialogWidth=document.body.scrollWidth+"px"</script>html5刪除了frame 和 frameset這個(gè)本來和IE11沒啥關(guān)

27、系，但既然碰到了這個(gè)問題，同時(shí)也懷疑前面的那個(gè)問題可能與此有關(guān)，也寫在這里吧。html5刪除了frame 和 frameset等元素，添加了article、detailist、figure、footer、header、nav、section、source等新元素。但iframe被保留了，至于保留到什么時(shí)候，沒人知道。有人建議使用div+css（主要是div的float屬性來布局）或者iframe來代替frameset。但iframe僅被有限支持，只有一個(gè)屬性src，其他屬性不行了。動(dòng)態(tài)部分可以使用Ajax實(shí)現(xiàn)，因此已經(jīng)沒有必要使用框架了也有人建議使用jquery的方法來動(dòng)態(tài)加載：$("#divID").load("xx.htm")頁面就可以了。個(gè)