一、函数和方法差异
1. getYear()方法
【分析说明】先看一下 以下代码:
var year= new Date().getYear();
document.write(year);
  在IE中得到的日期是"2010",在Firefox中看到的日期是"110",主要是因为在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值。
【兼容处理】
  加上对年份的判断,如:
var year= new Date().getYear();
year = (year<1900?(1900+year):year);
document.write(year);
   也可以通过 getFullYear getUTCFullYear 去调用:
var year = new Date().getFullYear();
document.write(year);
 
2. eval()函数
【分析说明】在IE中,可以使用eval("idName")或 getElementById("idName")来取得id为idName的 HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。
【兼 容处理】统一用getElementById("idName")来取得id为idName的HTML对象。
 
3. const声明
【分析说明】在 IE 中不能使用 const 关键字。如:
const constVar = 32; 
在IE中这是语法错误。
【兼 容处理】不使用 const ,以 var 代替。
 
4. var
【分析说明】请看 以下代码:
echo=function(str){
document.write(str);
}
pre>  这个函数在IE上运行 正常,Firefox下却报错了。
【兼容处理】而在echo前加上var就正常了,这个就是我们提到var的目的。
 
5. const 问题
【分析说明】在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
【解决方法】不使用 const ,以 var 代替。
 
二、样式访问和设置
1. CSS的"float"属性
【分析说明】Javascript访问一个给定CSS 值的最基本句法是:object.style.property,但部分CSS属性跟Javascript中的保留字命名相同, 如"float","for","class"等,不同浏览器写法不同。
在IE中这样写:
document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写:
document.getElementById("header").style.cssFloat = "left";
【兼容处理】在写之前加一个判断,判断浏览器是否是IE:
if(document.all){
   document.getElementById("header").style.styleFloat = "left";
}
else{
  document.getElementById("header").style.cssFloat = "left";
}
 
2. 访问<label>标签中的"for"
【分析说明】和"float"属性一样,同样需要使用不现的句法区分来访 问<label>标签中的"for"。
在IE中这样写:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中这样写:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
【兼容处理】解决的方法也是先 判断浏览器类型。
 
3. 访问和设置class属性
【分析说明】同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。
IE8.0之前的所有IE版本的写法:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
适用于IE8.0 以及 firefox的写法:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
  另外,在使用setAttribute()设置Class属性的时候,两种浏览器也存在同样的差异。
   setAttribute("className",value);
  这种写法适用于IE8.0之前的所有IE版本,注意:IE8.0 也不支持"className"属性了。
  setAttribute("class",value);适用于IE8.0 以及 firefox。
【兼容处理】
方法一,两种都写上:
var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
 //设置header的class为 classValue
方法二,IE和FF都支持 object.className,所以可以这样写:
var myObject = document.getElementById("header");
myObject.className="classValue";//设置header的class为classValue
方法三,先判断浏览器类型,再根据浏览 器类型采用对应的写法。
 
4. 对象宽高赋值问题
【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。
【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;
 
三、 DOM方法及对象引用
1. getElementById
【分析说明】先来看一组代 码:
<!-- input对象访问1 -->
<input />
 
总结
  IE和Firefox的Javascript方面存在着不少的差异,要做到兼容,我觉得很有必要把 一些常见的整理成一个js库,如DOM的操 作,事件的处理,XMLHttpRequest请求等,或者也可以选择使用现有的一些库(如jQuery,YUI,ExtJs等),不过我觉得还是有必要 了解一下这些差异,这样对于我们参加兼容性和可用性代码很有帮助。
  办法总比问题多,无论浏览器兼容如何折腾人,做前端开发的总能迎 刃而解的!

相关文章:

  • 2021-05-16
  • 2022-03-01
  • 2022-01-14
  • 2021-05-27
  • 2021-10-04
猜你喜欢
  • 2021-12-09
  • 2021-07-08
  • 2022-12-23
  • 2021-08-16
相关资源
相似解决方案