JS与DOM的兼容性

浏览器市场的百花争艳既打破了IE一家独霸的垄断局面也给网页开发者带来不小的麻烦,IEFireFoxOperaSafari……还有新秀Chrome...昨日黄花Netscape...Oh My God!究竟哪款浏览器可以完美展现我的网页效果?我那制作精美的网页在哪款浏览器上又糟糕的一塌糊涂?本文仅关注占浏览器市场份额绝大部分的IEFireFox对网页开发中的兼容性问题,文中所涉及经验部分为笔者在实际开发中总结、另有较多信息从大量互联网资料中整理所得,并未一一测试验证。本文作为教程还远远不够,权且当作经验总结以供大家参考。

 

一、            JSDOM的兼容性:

 

() DOM节点的访问:

 

1.        以前对DOM节点访问一般用document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFox中有时不支持此方法。

 

解决办法:标准的方法为document.getElementById(‘元素ID属性值’)”或者“document.getElementByName(‘元素Name属性值’)[0]”或者“document.getElementByTagName(‘元素标签名’)[0]”;

2.        集合类对象的()[]的问题:以前的代码中很多集合类对象的访问使用()IE可以正常解析,FireFox不支持。

 

解决办法:改用[]作为下标符号。如:document.Forms(‘FormName’)改为document.Forms[‘FormName’];又如:document.getElementsByName(‘元素Name属性值’)(1)改为document.getElementsByName(‘元素Name属性值’)[1]

 

3.        document.Form.Item的问题:FireFox不能正常解析形如:document.FormName.Item("ItemName")这样的语句,IEFireFox都支持document.FormName.Elements["ElementName"]

 

解决办法:改用如下语句形式:document.FormName.Elements["ElementName"]

 

4.        IE中,可以利用eval(‘元素ID属性值’)的方法取得改HTML对象,FireFox不支持此种对象访问方法。

 

解决办法:用document.getElementById(‘元素ID属性值’)”的方法取得对象;

 

5.        IE中可以通过ID属性值或者Name属性访问这个Frame对象,FireFox只可以通过Name属性来访问这个Frame对象;

IEFireFox均可通过window.document. getElementById(‘FrameId属性值’)来访问这个Frame对象

 

6.        IEbody对象要在<body>标签完全读入才会存在,而在FireFox中一开始就存在

 

7.        IEinput标签的type属性是只读的,但在FireFox中是可读写的

 

8.        IEgetElementsByName()document.all[name]均不能用来取得div元素

 

9.        IE,FireFox以及其它浏览器对于Table标签的操作都各不相同,在IE中不允许对TableTRinnerHTML赋值,使用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].textchildNodes[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>

IEFireFox<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操作的异同请参见IEFireFox浏览器读取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(){/* … … */}(注意Functionfunction的区别)

 

2.        FireFoxevent只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:

 

原代码(可在IE中运行)

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

...

<script language="javascript">

function gotoSubmit(){

...

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

...

}

</script>

 

新代码(可在IEFireFox中运行)
<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对象有xy两属性,FireFox中没有;相对的在FireFox中,event对象有pageXpageY两属性,IE中没有。

 

解决办法:用event.clientXevent.clientY代替,缺陷是在页面中存在滚动条时与pageXpageY有细微差别;或者用如下方法代替:

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

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

可取得无差别数值。

 

4.        IEevent对象有srcElement属性,但是没有target属性; Firefoxevent对象有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中用JSobj.OnSelectStart=function(){return false;}

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

 

() JS的语法兼容性:

 

1.        FireFox中可以使用与HTML节点对象ID属性值相同的JS变量名称,但是IE中不行。

 

解决办法:在命名上区分HTML节点对象ID属性值和JS变量

 

2.        IE不支持JSconst,无法定义JS常量

 

解决办法:全部用var定义为变量

 

3.        JS中书写URL地址字符串时&字符就直接写为&(去掉双引号),不要写&”,否则容易出现URL识别不正常的错误

 

4.        IE中可以通过showModalDialogshowModelessDialog打开模式和非模式窗口,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();实例化对象

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页