JS常见的兼容性问题汇总

JS常见的兼容性问题汇总

• 1> 滚动条：

document.documentElement.scrollTop || document.body.scrollTop

• 2> 获取样式兼容

function getStyle(dom, styleName){
   
   
	return dom.currentStyle? dom.currentStyle[styleName] : getComputedStyle(dom)[styleName];
}

• 3> 网页可视区域兼容

window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidth

• 4） 事件对象兼容

evt = evt || window.event;

• 5） 阻止事件冒泡兼容

event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true; 

• 6）阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

• 7）事件监听兼容

if(document.all){
   
   
    dom.attactEvent(“onclick”, fn);
} else {
   
   
    dom.addEventListener(“click”, fn);
}

下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子

• 1.document.formName.item(“itemName”) 问题
  说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
  Firefox下,只能使用document.formName.elements["elementName"].
  解决方法:统一使用document.formName.elements["elementName"].

• 2.集合类对象问题
  说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
  解决方法:统一使用[]获取集合类对象.

• 3.自定义属性问题
  说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
  解决方法:统一通过getAttribute()获取自定义属性.

• 4.eval(“idName”)问题
  说明:IE下,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对 象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
  解决方法:统一用getElementById(“idName”)来取得id为idName的HTML对象.

• 5.变量名与某HTML对象ID相同的问题
  说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
  解决方法:使用document.getElementById(“idName”)代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

• 6.const问题
  说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
  解决方法:统一使用var关键字来定义常量.

• 7.input.type属性问题
  说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.

• 8.window.event问题
  说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用. Firefox必须从源处加入event作参数传递。Ie忽略该参数，用window.event来读取该event。
  解决方法:
  IE&Firefox:
  Submitted(event)"/> …

function Submitted(evt) {
   
   
evt=evt?evt:(window