Javascript常见浏览器兼容问题

常见浏览器原生javascript兼容性问题主要分为以下几类:

一、Dom

1、获取HTML元素,兼容所有浏览器方法:document.getElementById("id")以Id来获取元素;

document.getElementsByTagName(“tag”)[0]以标签名来获取元素。另外IE不支持document.getElementsByClassName("class");

2、获取Form表单元素

只兼容IE:document.formname.itemname

兼容所有:document.forms[“formName”].elements[“itemname”]  或 document.forms[i].elements[“itemname”]

3、设置CSS

只兼容FireFox:obj.setAttribute(style,color:green)

兼容所有:document.getElementById("banana").className 和document.getElementById("banana").style.color

4、获取CSS

获取内嵌样式均可用style来获取,对于获取内部样式和外联样式表中的样式,不同浏览器差异如下

只兼容IE:currentStyle

标准浏览器中:getComputedStyle

5、设置宽高

只兼容IE:obj.style.height = imgObj.height

兼容所有:obj.style.height = imgObj.height + 'px';

6、innerText

只兼容IE:obj.innerText= "myText";

兼容所有: if (document.all) {   obj.innerText = "myText";  } else {  obj.textContent = "myText";  }

二、事件

1、事件流,目前事件流主要指捕获-目标-冒泡,二IE6-IE8不支持事件捕获,一般在事件冒泡阶段对事件作出响应。

2、添加事件和删除事件

只兼容IE:obj.achEvent("onclick",handler)  click代表事件,handler代表处理函数。删除事件用detachEvent("click",handler)。

兼容飞IE:obj.addEventListener("click",handler,false) click代表事件,handler代表处理函数,第三个参数表示是否捕获,这里false表示不用在捕获阶段,一般为false。删除事件用removeEventListener("click",handler,false)。

3、事件对象

对于事件对象event,IE下为window.event,兼容所有浏览器写法为event = event || window.event;

获取触发事件的目标节点,IE下为event.srcElement,非IE浏览器为event.target,要获取定义了事件的对象则用event.this。

三、BOM

1、打开窗口

只兼容IE:IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口

兼容所有:直接使用window.open(pageURL,name,parameters)方式打开新窗口。

2、获取Frame对象

只兼容IE:var frame1 = window.testFrame

兼容所有:window.top.document.getElementById("frameId")来访问frame标签,并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容,也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容 。

目前我所遇到的常用的总结就这么多,后面学习中遇到的我会补充添加进来。

上一篇:jQuery.Deferred 源码分析


下一篇:Verilog实现IIC通讯第二版