【分析说明】先看一下 以下代码:
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);
【分析说明】在IE中,可以使用eval("idName")或 getElementById("idName")来取得id为idName的 HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。
【兼 容处理】统一用getElementById("idName")来取得id为idName的HTML对象。
【分析说明】在 IE 中不能使用 const 关键字。如:
const constVar = 32;
在IE中这是语法错误。
【兼 容处理】不使用 const ,以 var 代替。
【分析说明】请看 以下代码:
echo=function(str){
document.write(str);
}
pre> 这个函数在IE上运行 正常,Firefox下却报错了。
【兼容处理】而在echo前加上var就正常了,这个就是我们提到var的目的。
【分析说明】在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
【解决方法】不使用 const ,以 var 代替。
二、样式访问和设置
【分析说明】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";
}
【分析说明】和"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");
【兼容处理】解决的方法也是先 判断浏览器类型。
【分析说明】同样由于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
方法三,先判断浏览器类型,再根据浏览 器类型采用对应的写法。
【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。
【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;
三、 DOM方法及对象引用
【分析说明】先来看一组代 码:
<!-- input对象访问1 -->
<input />
总结
IE和Firefox的Javascript方面存在着不少的差异,要做到兼容,我觉得很有必要把 一些常见的整理成一个js库,如DOM的操 作,事件的处理,XMLHttpRequest请求等,或者也可以选择使用现有的一些库(如jQuery,YUI,ExtJs等),不过我觉得还是有必要 了解一下这些差异,这样对于我们参加兼容性和可用性代码很有帮助。
办法总比问题多,无论浏览器兼容如何折腾人,做前端开发的总能迎 刃而解的!