JavaScript js 相容瀏覽器問題 相容FireFox(FF)、IE的解決方案

來源:互聯網
上載者:User

做BS開發就難免會用到javascript,而每個瀏覽器對javascript的支援有不同。這就需要我們程式員去相容他們,不然有些瀏覽器就無法運行我們的代碼。就會造來客戶的投訴,如果讓BoSS知道了,這可不太好哦。下面是相容IE和FF的js指令碼做法和分解(部分選自網上):</p><p>.以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox</p><p>//window.event<br />IE:有window.event對象<br />FF:沒有window.event對象。可以通過給函數的參數傳遞event對象。如onmousemove=doMouseMove(event) </p><p>//滑鼠當前座標<br />IE:event.x和event.y。<br />FF:event.pageX和event.pageY。<br />通用:兩者都有event.clientX和event.clientY屬性。 </p><p>//滑鼠當前座標(加上捲軸滾過的距離)<br />IE:event.offsetX和event.offsetY。<br />FF:event.layerX和event.layerY。 </p><p>//event.srcElement問題<br />說明:IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性.<br />解決方案:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來代替IE下的event.srcElement或者Firefox下的event.target. 請同時注意event的相容性問題。</p><p>//event.toElement問題<br />問題:<br />IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性<br />解決方案:<br />var target = e.relatedTarget || e.toElement; </p><p>//標籤的x和y的座標位置:style.posLeft 和 style.posTop<br />IE:有。<br />FF:沒有。<br />通用:object.offsetLeft 和 object.offsetTop。 </p><p>//表單的高度和寬度<br />IE:document.body.offsetWidth和document.body.offsetHeight。注意:此時頁面一定要有body標籤。<br />FF:window.innerWidth和window.innerHegiht,以及document.documentElement.clientWidth和document.documentElement.clientHeight。<br />通用:document.body.clientWidth和document.body.clientHeight。 </p><p>//添加事件<br />IE:element.attachEvent("onclick", function);。<br />FF:element.addEventListener("click", function, true)。<br />通 用:element.onclick=function。雖然都可以使用onclick事件,但是onclick和上面兩種方法的效果是不一樣的,onclick 只有執行一個過程,而attachEvent和addEventListener執行的是一個過程列表,也就是多個過程。例如:element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)這樣func1和func2都會被執行。 </p><p>//標籤的自訂屬性<br />IE:如果給標籤div1定義了一個屬性value,可以div1.value和div1["value"]取得該值。<br />FF:不能用div1.value和div1["value"]取。<br />通用:div1.getAttribute("value")。 </p><p>//document.form.item 問題<br />IE:現有問題:現有代碼中存在許多 document.formName.item("itemName") 這樣的語句,不能在 MF 下運行<br />FF/IE: document.formName.elements["elementName"]</p><p>//集合/數組類對象問題<br />(1)現有問題:<br /> 現有代碼中許多集合類對象取用時使用 (),IE 能接受,MF 不能。<br />(2)解決方案:<br /> 改用 [] 作為下標運算。如:document.forms("formName") 改為 document.forms["formName"]。<br /> 又如:document.getElementsByName("inputName")(1) 改為 document.getElementsByName("inputName")[1]</p><p>//HTML 對象的 id 作為對象名的問題<br />(1)現有問題<br /> 在 IE 中,HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在 MF 中不能。<br />(2)解決方案<br /> 用 getElementById("idName") 代替 idName 作為物件變數使用</p><p>//用idName字串取得對象的問題<br />(1)現有問題<br /> 在IE中,利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象,在MF 中不能。<br />(2)解決方案<br /> 用 getElementById(idName) 代替 eval(idName)。</p><p>//變數名與某 HTML 對象 id 相同的問題<br />(1)現有問題<br /> 在 MF 中,因為對象 id 不作為 HTML 對象的名稱,所以可以使用與 HTML 對象 id 相同的變數名,IE 中不能。<br />(2)解決方案<br /> 在聲明變數時,一律加上 var ,以避免歧義,這樣在 IE 中亦可正常運行。<br /> 此外,最好不要取與 HTML 對象 id 相同的變數名,以減少錯誤。</p><p>//document.getElementsByName() 和 document.all[name] 的問題<br />現有問題:在 IE 中,getElementsByName()、document.all[name] 均不能用來取得 div 元素(是否還有其它不能取的元素還不知道)。<br />//document.all<br />Firefox可以相容document.all, 但會產生一條警告。可以用getElementById("*") 或者 getElementByTagName("*")來代替<br />不過對於document.all.length等屬性,則完全不相容</p><p>//input.type屬性問題<br />說明:IE下input.type屬性為唯讀;但是Firefox下input.type屬性為讀寫</p><p>//window.location.href問題<br />說明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location<br />解決方案:使用window.location來代替window.location.href</p><p>//模態和非模態視窗問題<br />說明:IE下,可以通過showModalDialog和showModelessDialog開啟模態和非模態視窗;Firefox下則不能<br />解決方案:直接使用window.open(pageURL,name,parameters)方式開啟新視窗。<br />如果需要將子視窗中的參數傳遞迴父視窗,可以在子視窗中使用window.opener來訪問父視窗. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing"; </p><p>//frame問題<br />以下面的frame為例:<br /><frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" /><br />(1)訪問frame對象:<br />IE:使用window.frameId或者window.frameName來訪問這個frame對象. frameId和frameName可以同名。<br />FF:只能使用window.frameName來訪問這個frame對象.<br />另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.<br />(2)切換frame內容:<br />在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.<br />如果需要將frame中的參數傳回父視窗(注意不是opener,而是parent frame),可以在frme中使用parent來訪問父視窗。例如:window.parent.document.form1.filename.value="Aqing"; </p><p>//body問題<br />Firefox的body在body標籤沒有被瀏覽器完全讀入之前就存在;而IE的body則必須在body標籤被瀏覽器完全讀入之後才存在</p><p>//事件委託方法<br />IE:document.body.onload = inject; //Function inject()在這之前已被實現<br />FF:document.body.onload = inject(); </p><p>//firefox與IE的父元素(parentElement)的區別<br />IE:obj.parentElement<br />FF:obj.parentNode<br />解決方案: 因為FF與IE都支援DOM,因此使用obj.parentNode是不錯選擇</p><p>//innerText在IE中能正常工作,但是innerText在FireFox中卻不行. 需用textContent</p><p>//FireFox中設定HTML標籤的style時,所有位置性和字型尺寸的值必須後跟px。這個ie也是支援的</p><p>//父節點、子節點和刪除節點<br />IE:parentElement、parement.children,element.romoveNode(true)。<br />FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。 </p><p>//對select的options集合操作<br />枚舉元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在兩種瀏覽器上使用。<br />注意在add後賦值元素,否則會失敗<br />動態刪除select中的所有options:<br /> document.getElementById("ddlResourceType").options.length=0;<br />動態刪除select中的某一項option:<br /> document.getElementById("ddlResourceType").options.remove(indx);<br />動態添加select中的項option:<br /> document.getElementById("ddlResourceType").options.add(new Option(text,value));<br />IE FF 動態刪除通用方法:<br />document.getElementById("ddlResourceType").options[indx] = null;</p><p>//捕獲事件<br />問題:<br />FF沒有setCapture()、releaseCapture()方法<br />解決方案:<br />IE:<br />obj.setCapture();<br />obj.releaseCapture();<br />FF:<br />window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br />window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br />if (!window.captureEvents) {<br /> o.setCapture();<br />}else {<br /> window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br />}<br />if (!window.captureEvents) {<br /> o.releaseCapture();<br />}else {<br /> window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br />} </p><p>//禁止選取網頁內容<br />問題:<br />FF需要用CSS禁止,IE用JS禁止<br />解決方案:<br />IE: obj.onselectstart = function() {return false;}<br />FF: -moz-user-select:none; </p><p>//畫圖<br />IE:VML。<br />FF:SVG。 </p><p>//CSS:透明<br />IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。<br />FF:opacity:0.6。 </p><p>//CSS:圓角<br />IE:不支援圓角。<br />FF:-moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。 </p><p>//CSS:雙線凹凸邊框<br />IE:border:2px outset;。<br />FF:-moz- border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.