瀏覽器中JS的兼容問題

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

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

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

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

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

6、ent比方說: 在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ū)別 對

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

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

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

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

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

12、t;function gotoSubmit() .alert(window.event); / use window.event.</script> 新代碼(可在IE和MF中運行)：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 調用沒有給參數(shù))，則仍然只能在IE中運行，但不會出錯。所以，這種方案 tpl 部分仍和老代碼兼容。 / 以下來自網友 llihua /事件處理函數(shù)function a(evt) /FireFoxevt = evt? evt: window.event; /IEvar srcElem = (evt.target)? evt.target: evt.srcElement;/事件處理.在連接事件處理函數(shù)的時候，能夠用Inline HTML方式，也能夠用Eventproperty方式定義。1、使用I

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

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

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

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

18、夠通過name來訪問這個frame對應的window對象例如假如上述frame標簽寫在最上層的window里面的htm里面，那么能夠這樣訪問另外，在mf和ie中都能夠使用來訪問frame標簽并且能夠通過來轉換frame的內容關于frame和window的描述能夠參見bbs的window和frame文章連同/test/js/test_frame/目錄下面的測試9. 在mf中，自己定義的屬性必須getAttribute()取得10.在mf中沒有 parentElement parement.children 而用parentNode parentNode.childNodeschildNodes的

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