JavaScript DOM兼容性問題整理及部分解決方案

時間  2019-11-08
標籤 javascript dom 兼容性 問題 整理 部分 解決 方案 欄目 JavaScript 简体版
原文   原文鏈接

發現JS裏面DOM屬性、方法不是全部的瀏覽器都支持，所以整理此份資料，以便之後學習查看使用，望對你們也有所幫助。javascript

(一) DOM節點的訪問： php

 1. 之前對DOM節點訪問通常用「document.All.元素ID屬性值」或者「document.元素ID屬性值」這種簡化的方法，在FireFox中有時不支持此方法。css

 解決辦法：標準的方法爲「document.getElementById(‘元素ID屬性值’)」或者「document.getElementByName(‘元素Name屬性值’)[0]」或者「document.getElementByTagName(‘元素標籤名’)[0]」；html

2.  集合類對象的()與[]的問題：之前的代碼中不少集合類對象的訪問使用()，IE能夠正常解析，FireFox不支持。java

解決辦法：改用[]做爲下標符號。如：document.Forms(‘FormName’)改成document.Forms[‘FormName’]；又如：document.getElementsByName(‘元素Name屬性值’)(1)改成document.getElementsByName(‘元素Name屬性值’)[1]；node

3. document.Form.Item的問題：FireFox不能正常解析形如：document.FormName.Item("ItemName")這樣的語句,但IE與FireFox都支持document.FormName.Elements["ElementName"]。瀏覽器

解決辦法：改用以下語句形式：document.FormName.Elements["ElementName"]；緩存

4.在IE中，能夠利用eval(‘元素ID屬性值’)的方法取得改HTML對象，FireFox不支持此種對象訪問方法。app

解決辦法：用「document.getElementById(‘元素ID屬性值’)」的方法取得對象；less

5. 在IE中能夠經過ID屬性值或者Name屬性訪問這個Frame對象,而FireFox只能夠經過Name屬性來訪問這個Frame對象;

IE和FireFox都可經過window.document. getElementById(‘FrameId屬性值’)來訪問這個Frame對象

6. 在IE中body對象要在<body>標籤徹底讀入纔會存在，而在FireFox中一開始就存在

7. 在IE中input標籤的type屬性是隻讀的，但在FireFox中是可讀寫的

8. 在IE中getElementsByName()、document.all[name]均不能用來取得div元素

9. IE,FireFox以及其它瀏覽器對於Table標籤的操做都各不相同，在IE中不容許對Table和TR的innerHTML賦值，使用JS增長一個TR時，使用appendChild方法也無論用。

解決辦法：

//向Table追加一個空行：
var row = otable.insertRow(-1); 
var cell = document.createElement("td"); 
cell.innerHTML = " "; 
cell.className = "XXXX"; 
row.appendChild(cell);

10.  在FireFox節點中沒有removeNode方法，必須使用以下方法 node.parentNode.removeChild(node)

11. IE或者FireFox2.0.x下,可使用window.location或window.location.href;但在FireFox1.5下，只能使用window.location

解決方法:使用window.location來代替window.location.href

12. IE與FireFox的訪問父元素有區別，IE爲Obj.ParentElement屬性;FireFox爲Obj.ParentNode屬性

解決辦法：由於FireFox與IE都支持DOM，所以統一用ParentNode屬性

13. FireFox不支持元素的innerText屬性，需用textContent

解決辦法：

if(navigator.appName.indexOf("Explorer") > -1){

    document.getElementById('element').innerText = "my text";

} else{

    document.getElementById('element').textContent = "my text";

}

14.  FireFox不支持元素的HtmlText屬性

解決辦法：

rng = document.createRange();

el = document.getElementById(ElementId);

rng.setStartBefore(el);

htmlFrag = rng.createContextualFragment(content);

while (el.hasChildNodes()){     //清除原有內容，加入新內容

el.RemoveChild(el.LastChild);

              }

el.AppendChild(htmlFrag);

15. 在IE下能夠用<Img Id="pic" OnClick="this.src= ‘aa.php’" src="aa.php" style="cursor: pointer"/> 能夠刷新圖片，但在FireFox下因爲緩存問題不行。

解決辦法：

在地址後面加個隨機數：編輯onclick事件代碼以下："this.src=this.src+’?’+Math.random()"

16. 在訪問某一節點如childNodes[i]時，要得到該節點的值而這個值是<![CDATA[]]類型，那麼在IE中可支持這樣訪問childNodes[i].text或childNodes[i].firstChild.nodeValue；在FireFox只支持childNodes[i].firstChild.nodeValue

解決辦法：統一用childNodes[i].firstChild.nodeValue方法訪問節點元素值

17. 在形如

<root>
<en>text</en>
</root>

格式的XML,在IE中<en>是<root>的第一個子節點，可經過root.childNodes[0]或root.firstChild訪問，但在FireFox中<en>是<root>的第二個子節點，第一個子元素是換行符，NodeType是#text;若是將XML換成以下格式

<root><en>text</en></root>

在IE和FireFox中<en>都是<root>的第一個子節點

18. 在用JS建立單選按鈕上的方法上，IE與其它瀏覽器不一樣，要寫出通用的建立方法就須要一種瀏覽器嗅探機制(browser-sniffing);IE是惟一可以識別uniqueID這一document對象專屬屬性的瀏覽器，故可用該屬性區分瀏覽器類型；代碼以下：

if(document.uniqueID){

//Internet Explorer

var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");

}else{

//Standards Compliant

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion");

readioButtion.setAttribute("value","checked");

}

19. 刪除select列表標籤的列表項應該用obj.remove(i);而不是用obj.options.remove(i);

20. 添加select列表標籤的列表項應該用

var oOption = document.createElement('option');

oOption.text = text;

oOption.value = value;

targetArea.options[targetArea.options.length]= oOption; //new Option(text,value);

而不是用

var oOption = document.createElement('option');

oOption.text = text;

oOption.value = value;

targetArea.options.add(oOption);

21.IE中通常這樣初始化一個XMLDOM對象

var xmlDom = new ActiveXObject("Microsoft.XMLDOM");

FireFox不支持該方法(具體緣由參見四.JS的語法兼容性.6.)，兼容性代碼以下

if (window.ActiveXObject){

var xmlDom = new ActiveXObject("Microsoft.XMLDOM");

}else{

if (document.implementation && document.implementation.createDocument){

var xmlDom = document.implementation.createDocument("","",null);

}

}

有關不一樣瀏覽器對XMLDOM操做的異同請參見《IE和FireFox瀏覽器讀取XML方法比較》

(二) DOM節點屬性的訪問：

1.原來在IE中設置HTML對象屬性的方法如：document.all.apple.width=100或者apple.width=100；如今爲了可以和FireFox兼容，對象屬性的設置寫爲：document.getElementById(‘元素ID屬性值’).setAttribute(‘width’, ‘100’)
document.getElementsByTagName(‘元素標籤名’)[0].setAttribute(‘width’, ‘100’)

對象屬性的獲取寫爲：

document.getElementById(‘元素ID屬性值’).getAttribute(‘width’)
document.getElementsByTagName(‘元素標籤名’)[0].getAttribute(‘width’)

2.(接上條) 在IE下不能正確使用setAttribute來設置對象的style、class以及事件響應屬性, 所以還得按原來的方法來訪問和設置，以達到兼容各類瀏覽器的效果

以下例：

document.getElementById(‘元素ID屬性值’).class

document.getElementById(‘元素ID屬性值’).style.color

document.getElementById(‘元素ID屬性值’).onclick

document.getElementById(‘元素ID屬性值’).class="classname"

document.getElementById(‘元素ID屬性值’).style.color="colorname"

document.getElementById(‘元素ID屬性值’).onclick= function(){alert(‘函數內容’)}

3. 在FireFox中，本身定義的屬性必須用getAttribute()方法獲取，不能像在IE下直接獲取

解決辦法：統一用getAttribute()方法獲取

4. img標籤具備title和alt兩個屬性，title用做圖片的tip說明，alt用在圖片不存在或加載失敗時的提示；在IE中若未定義title則alt也承擔了title的做用，但在FireFox則各司其職；所以爲保證瀏覽器兼容最好各盡其用

5. IE中要操做某個節點(Node)的class要用」className」作爲屬性名來設置或取得，FireFox和其它瀏覽器用」class」作爲屬性名來設置或取得

6. 設置某個節點(Node)的style,若是用」style」 作爲屬性名其它瀏覽器都能解析，但IE會忽略；若是用」cssText」 作爲屬性名其它瀏覽器都能解析，但Opera會忽略;通用代碼以下：

var oStyle = oNode.getAttribute("style");

if(oStyle == "[object]"){

oStyle.setAttribute("cssText", strStyle);

oNode.setAttribute("style", oStyle);

}else{

oNode.setAttribute("style", strStyle);

}

(三) DOM事件(event)的使用：

1. IE下通常用document.body.onload = onload_func這樣的方法註冊onload響應事件函數，其中function onload_func()在這以前已經被實現，可是在FireFox下卻沒法執行; FireFox下通常用document.body.onload = onload_func()這樣的方法。

解決辦法：都採用window.onload = onload_func這種方法;或者都採用document.body.onload = new Function('onload_func'); 或者都採用document.body.onload = function(){/* … … */}。(注意Function與function的區別)

2. FireFox的event只能在事件發生的現場使用，此問題暫沒法解決。能夠這樣變通：

原代碼(可在IE中運行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>

...

<script language="javascript">

function gotoSubmit(){

...

alert(window.event);         // use window.event

...

}

</script>

新代碼(可在IE和FireFox中運行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/> 
...
<script language="javascript"> 
function gotoSubmit(evt) { 
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt);                           // use evt 
...
}
</script>

此外，若是新代碼中第一行不改，與原代碼相同的話(即gotoSubmit調用沒有給參數)，則仍然只能在IE中運行，但不會報錯。

3. 在IE中，event對象有x、y兩屬性，FireFox中沒有;相對的在FireFox中，event對象有pageX、pageY兩屬性，IE中沒有。

解決辦法：用event.clientX、event.clientY代替，缺陷是在頁面中存在滾動條時與pageX、pageY有細微差異；或者用以下方法代替：

pgX = event.x ? event.x : event.pageX;

pgY = event.y ? event.y : event.pageY;

可取得無差異數值。

4. 在IE中event對象有srcElement屬性,可是沒有target屬性; 在Firefox中event對象有target屬性,可是沒有srcElement屬性

解決辦法：用obj = event.srcElement ? event.srcElement : event.target;來代替IE下的event.srcElement或者Firefox下的event.target,請同時注意event的兼容性問題。

5. 添加事件捕獲    IE中：obj.setCapture()、obj.releaseCapture()

FireFox中：document.addEventListener( "mousemover",mousemovefunction,true);

document.removeEventListener( "mousemove ",mousemovefunction,true);

 

6.禁止選取網頁內容   IE中用JS：obj.OnSelectStart=function(){return false;}

FireFox中用CSS：-moz-user-select:none

(四) JS的語法兼容性：

1.  在FireFox中可使用與HTML節點對象ID屬性值相同的JS變量名稱，可是IE中不行。

解決辦法：在命名上區分HTML節點對象ID屬性值和JS變量

2. IE不支持JS的const,沒法定義JS常量

解決辦法：所有用var定義爲變量

3.在JS中書寫URL地址字符串時&字符就直接寫爲「&」(去掉雙引號),不要寫「&amp;」，不然容易出現URL識別不正常的錯誤

4. 在IE中能夠經過showModalDialog和showModelessDialog打開模式和非模式窗口，FireFox下則不能

解決辦法：使用Window.Open方法。 若是須要將子窗口中的參數傳遞迴父窗口，能夠在子窗口中使用Window.Opener屬性來訪問父窗口；若是須要父窗口控制子窗口的話，使用Var subWindow = Window.Open(pageURL,Name,Parameters); 來得到新開的窗口對象

5. 在IE中向表格裏添加一行的方法insertRow()若是不指定參數，默認參數爲-1,將自動向Table中追加1行；在FireFox中必定要指定參數如-1,參數爲空會報錯

6. 在IE中可使用new ActiveXObject()的方法實例化對象，如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");可是FireFox不支持ActiveXObject,只能經過這種方法如var xmlDom = new XMLHttpRequest();實例化對象

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程