瀏覽器中JS的兼容問(wèn)題

1、JS在IE和FF中的兼容性問(wèn)題1. 對(duì)象問(wèn)題 1.1 Form對(duì)象 現(xiàn)有問(wèn)題：現(xiàn)有代碼這獲得form對(duì)象通過(guò)document.forms("formName")，這樣使用在IE 能接受，MF 不能。解決方法：改用 作為下標(biāo)運(yùn)算。改為document.forms"formName"備注上述的改用 作為下標(biāo)運(yùn)算中的formName是id而name1.2 HTML對(duì)象 現(xiàn)有問(wèn)題：在 IE 中，HTML 對(duì)象的 ID 能夠作為 document 的下屬對(duì)象變量名直接使用。在 MF 中不能。document.all("itemName")或do

2、cument.all("itemId")解決方法：使用對(duì)象ID作為對(duì)象變量名document.getElementById("itemId")備注document.all是IE自定義的方法，所以請(qǐng)大家盡量不使用。更有一種方式，在IE和MF都能夠使用var f = document.forms"formName "var o = f. itemId;1.3 DIV對(duì)象 現(xiàn)有問(wèn)題：在 IE 中，DIV對(duì)象能夠使用ID作為對(duì)象變量名直接使用。在 MF 中不能。解決方法：document.getElementById("DivId&

3、quot;).style.display = "none"備注獲得對(duì)象的方法不管是不是DIV對(duì)象，都使用getElementById方法。參見(jiàn)1.21.4 關(guān)于frame 現(xiàn)有問(wèn)題在 IE中 能夠用window.testFrame取得該frame，mf中不行解決方法在frame的使用方面MF和IE的最主要的區(qū)別是：假如在frame標(biāo)簽中書寫了以下屬性：那么IE能夠通過(guò)id或name訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象而mf只能夠通過(guò)name來(lái)訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象例如假如上述frame標(biāo)簽寫在最上層的window里面的htm里面，那么能夠這樣訪問(wèn)1.5

4、 窗口 現(xiàn)有問(wèn)題IE中能夠通過(guò)showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口，但是MF不支持。解決辦法直接使用window.open(pageURL,name,parameters)方式打開新窗口。假如需要傳遞參數(shù)，能夠使用frame或iframe。2. 總結(jié)2.1 在JS中定義各種對(duì)象變量名時(shí)，盡量使用id，避免使用name。 在 IE 中，HTML 對(duì)象的 ID 能夠作為 document 的下屬對(duì)象變量名直接使用。在 MF 中不能，所以在平常使用時(shí)請(qǐng)盡量使用id，避免只使用name，而不使用id。2.2 變量名和某 HTML 對(duì)象 id 相同的問(wèn)

5、題 現(xiàn)有問(wèn)題在 MF 中，因?yàn)閷?duì)象 id 不作為 HTML 對(duì)象的名稱，所以能夠使用和 HTML 對(duì)象 id 相同的變量名，IE 中不能。解決方法在聲明變量時(shí)，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運(yùn)行。此外，最好不要取和 HTML 對(duì)象 id 相同的變量名，以減少錯(cuò)誤。1. document.allFirefox能夠兼容document.all， 但會(huì)生成一條警告。能夠用getElementById("*") 或 getElementByTagName("*)來(lái)代替2. parentElement3. eventW3C不支持windows.ev

6、ent比方說(shuō): 在IE里面.function onMenuClick()collapseMenu(event.srcElement); 工作正常。但是在Firefox中，則改成：function onMenuClick(evt)if(evt = null)evt = window.event; / For IEvar srcElement = evt.srcElement? evt.srcElement : evt.target; / IE使用srcElement, 而Firefox使用targetcollapseMenu(srcElement);IE和FIREFOX在解析CSS方面的區(qū)別 對(duì)

7、高度的解析 IE：將根據(jù)內(nèi)容的高度變化，包括未定義高度的圖片內(nèi)容，即使定義了高度，當(dāng)內(nèi)容超過(guò)高度時(shí)，將使用實(shí)際高度 Firefox：沒(méi)有定義高度時(shí)，假如內(nèi)容中包括了圖片內(nèi)容，MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn)，這樣就會(huì)造成和實(shí)際內(nèi)容高度不符合的情況；當(dāng)定義了高度，但是內(nèi)容超過(guò)高度時(shí)，內(nèi)容會(huì)超出定義的高度，但是區(qū)域使用的樣式不會(huì)變化，造成樣式錯(cuò)位。 結(jié)論：大家在能夠確定內(nèi)容高度的情況下最好定義高度，假如真的沒(méi)有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會(huì)出現(xiàn)混亂！ img對(duì)象alt和title的解析 alt：當(dāng)照片不存在或load錯(cuò)誤時(shí)的提示； title：照片的tip說(shuō)明。 在IE中假如沒(méi)有定

8、義title，alt也能夠作為img的tip使用，但是在MF中，兩者完全按照標(biāo)準(zhǔn)中的定義使用 結(jié)論：大家在定義img對(duì)象時(shí)，最后將alt和title對(duì)象都寫全，確保在各種瀏覽器中都能正常使用 其他的細(xì)節(jié)差別 當(dāng)您在寫css的時(shí)候，特別是用float: left（或right）排列一竄圖片時(shí)，會(huì)發(fā)現(xiàn)在firefox里面正常而IE里面有問(wèn)題。無(wú)論您用margin:0,還是border: 0來(lái)約束，都無(wú)濟(jì)于事。 其實(shí)這里更有另外一個(gè)問(wèn)題，就是IE對(duì)于空格的處理，firefox是忽略的而IE對(duì)于塊和塊之間的空格是處理的。也就是說(shuō)一個(gè)div結(jié)束后要緊接著一個(gè)div寫，中間不要有回車或空格。不然也許會(huì)有問(wèn)

9、題，比如3px的偏差，而且這個(gè)原因很難發(fā)現(xiàn)。 很不走運(yùn)的是我又碰到了這樣的問(wèn)題，多個(gè)img標(biāo)簽連著，然后定義的float: left，希望這些圖片能夠連起來(lái)。但是結(jié)果在firefox里面正常而IE里面顯示的每個(gè)img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒(méi)有作用。 后來(lái)的解決方法是在img外面套li，并且對(duì)li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對(duì)于一些模型的解釋會(huì)產(chǎn)生很多錯(cuò)誤問(wèn)題，只有多多嘗試才能發(fā)現(xiàn)原因。 這只是一些簡(jiǎn)單的區(qū)別,在做布局和CSS設(shè)計(jì)時(shí)候能夠綜合考慮,但最為有效和簡(jiǎn)單的解決兼容問(wèn)題還是用TABLE表格,表格在兼容性方面有著不錯(cuò)的表現(xiàn).

10、另外在模版的JS設(shè)計(jì)的時(shí)候也需要考慮兩者對(duì)代碼的兼容,以下是對(duì)IE和FIREFOX中JS的一些測(cè)試: 以下以 IE 代替 Internet Explorer，以 MF 代替 Mozilla Firefox (1)現(xiàn)有問(wèn)題：在 MF 下運(yùn)行(2)解決方法：(3)其他參見(jiàn) 2 2. 集合類對(duì)象問(wèn)題(1)現(xiàn)有問(wèn)題：現(xiàn)有代碼中許多集合類對(duì)象取用時(shí)使用 ()，IE 能接受，MF 不能。(2)解決方法：改用 作為下標(biāo)運(yùn)算。如：document.forms("formName") 改為document.forms"formName"。又如：document.getEl

11、ementsByName("inputName")(1) 改為document.getElementsByName("inputName")1(3)其他 3. window.event(1)現(xiàn)有問(wèn)題：使用 window.event 無(wú)法在 MF 上運(yùn)行(2)解決方法：MF 的 event 只能在事件發(fā)生的現(xiàn)場(chǎng)使用，此問(wèn)題暫無(wú)法解決。能夠這樣變通：原代碼(可在IE中運(yùn)行)：onclick="javascript:gotoSubmit()"/>.<script language="javascript"&g

12、t;function gotoSubmit() .alert(window.event); / use window.event.</script> 新代碼(可在IE和MF中運(yùn)行)：onclick="javascript:gotoSubmit(event)"/>.<script language="javascript">function gotoSubmit(evt) evt = evt ? evt : (window.event ? window.event : null);.alert(evt); / use evt.

13、</script>此外，假如新代碼中第一行不改，和老代碼相同的話(即 gotoSubmit 調(diào)用沒(méi)有給參數(shù))，則仍然只能在IE中運(yùn)行，但不會(huì)出錯(cuò)。所以，這種方案 tpl 部分仍和老代碼兼容。 / 以下來(lái)自網(wǎng)友 llihua /事件處理函數(shù)function a(evt) /FireFoxevt = evt? evt: window.event; /IEvar srcElem = (evt.target)? evt.target: evt.srcElement;/事件處理.在連接事件處理函數(shù)的時(shí)候，能夠用Inline HTML方式，也能夠用Eventproperty方式定義。1、使用I

14、nline HTML方式，如：onclick="javascript:a(event)">注意：(1)javascript不能??；(2)實(shí)參要使用event，形參使用什么都能夠(如evt、event等)；2、使用Event property方式綁定事件處理函數(shù)，如：/ 以上來(lái)自網(wǎng)友 llihua / 4. HTML 對(duì)象的 id 作為對(duì)象名的問(wèn)題(1)現(xiàn)有問(wèn)題在 IE 中，HTML 對(duì)象的 ID 能夠作為 document 的下屬對(duì)象變量名直接使用。在MF 中不能。(2)解決方法用 getElementById("idName") 代替 idNam

15、e 作為對(duì)象變量使用。 5. 用idName字符串取得對(duì)象的問(wèn)題(1)現(xiàn)有問(wèn)題在IE中，利用 eval(idName) 能夠取得 id 為 idName 的 HTML 對(duì)象，在MF 中不能。(2)解決方法用 getElementById(idName) 代替 eval(idName)。 6. 變量名和某 HTML 對(duì)象 id 相同的問(wèn)題(1)現(xiàn)有問(wèn)題在 MF 中，因?yàn)閷?duì)象 id 不作為 HTML 對(duì)象的名稱，所以能夠使用和 HTML 對(duì)象id 相同的變量名，IE 中不能。(2)解決方法在聲明變量時(shí)，一律加上 var ，以避免歧義，這樣在 IE 中亦可正常運(yùn)行。此外，最好不要取和 HTML 對(duì)象

16、 id 相同的變量名，以減少錯(cuò)誤。(3)其他參見(jiàn) 問(wèn)題4 7. event.x 和 event.y 問(wèn)題(1)現(xiàn)有問(wèn)題在IE 中，event 對(duì)象有 x, y 屬性，MF中沒(méi)有。(2)解決方法在MF中，和event.x 等效的是 event.pageX。但event.pageX IE中沒(méi)有。故采用 event.clientX 代替 event.x。在IE 中也有這個(gè)變量。event.clientX 和 event.pageX 有微妙的差別（當(dāng)整個(gè)頁(yè)面有滾動(dòng)條的時(shí)候），但是大多數(shù)時(shí)候是等效的。 假如要完全相同，能夠稍麻煩些：mX = event.x ? event.x : event.pageX

17、;然后用 mX 代替 event.x(3)其他event.layerX 在 IE 和 MF 中都有，具體意義有無(wú)差別尚未試驗(yàn)。 8. 關(guān)于frame(1)現(xiàn)有問(wèn)題在 IE中 能夠用window.testFrame取得該frame，mf中不行(2)解決方法在frame的使用方面mf和ie的最主要的區(qū)別是：假如在frame標(biāo)簽中書寫了以下屬性：<frame src="/xx.htm" id="frameId" name="frameName" />那么ie能夠通過(guò)id或name訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象而mf只能

18、夠通過(guò)name來(lái)訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象例如假如上述frame標(biāo)簽寫在最上層的window里面的htm里面，那么能夠這樣訪問(wèn)另外，在mf和ie中都能夠使用來(lái)訪問(wèn)frame標(biāo)簽并且能夠通過(guò)來(lái)轉(zhuǎn)換frame的內(nèi)容關(guān)于frame和window的描述能夠參見(jiàn)bbs的window和frame文章連同/test/js/test_frame/目錄下面的測(cè)試9. 在mf中，自己定義的屬性必須getAttribute()取得10.在mf中沒(méi)有 parentElement parement.children 而用parentNode parentNode.childNodeschildNodes的

19、下標(biāo)的含義在IE和MF中不同，MF使用DOM規(guī)范，childNodes中會(huì)插入空白文本節(jié)點(diǎn)。一般能夠通過(guò)node.getElementsByTagName()來(lái)回避這個(gè)問(wèn)題。當(dāng)html中節(jié)點(diǎn)缺失時(shí)，IE和MF對(duì)parentNode的解釋不同，例如MF中input.parentNode的值為form, 而IE中input.parentNode的值為空節(jié)點(diǎn) MF中節(jié)點(diǎn)沒(méi)有removeNode方法，必須使用如下方法11.const 問(wèn)題(1)現(xiàn)有問(wèn)題:在 IE 中不能使用 const 關(guān)鍵字。如 const constVar = 32;在IE中這是語(yǔ)法錯(cuò)誤。(2)解決方法:不使用 const ，以 var 代替。 12. body 對(duì)象MF的body在body標(biāo)簽沒(méi)有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之后才存在 13. url encoding在js中假如書寫url就直接寫&不要寫&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx'frm.