整理浏览器对网页的兼容性问题（一）——JS&DOM篇

最新推荐文章于 2024-04-21 22:42:05 发布

转载最新推荐文章于 2024-04-21 22:42:05 发布 · 460 阅读

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了浏览器兼容性问题，特别是针对IE和Firefox在JS和DOM操作方面的差异。包括DOM节点访问、属性操作、事件处理及JS语法的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 整理浏览器对网页的兼容性问题（一）——JS&DOM篇

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

 一、
             
 js
 与DOM的兼容性：

 (一) 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")这样的语句,但IE与FireFox都支持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对象;

 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地址字符串时&
 字符就直接写为
 “&”(去掉双引号),
 不要写
 “&”，否则容易出现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();实例化对象