IE与FF的兼容性收集(一)

以下以 IE 代替 Internet Explorer，以 FF 代替 Mozzila Firefox。

IE与FF的判别方法其一：

if(window.navigator.userAgent.indexOf("MSIE")>=1) return 'IE'; else if(window.navigator.userAgent.indexOf("Firefox")>=1) return 'FF';

其它方法及详细参数的JS判别方法可以参见本博客里面的“javascript:判断浏览器类型和客户端操作系统”。

1. 获取文档对象或集合元素

(1)现有问题：取集合元素时, ie支持 [],() 2种写法, 但是ff仅支持[]
(2)解决方法：改用[]来获取文档对象或集合元素，例如document.formName.elements["elementName"]
(3)其它：最好都用document.getElementById 并且控件尽量用id,而不是name标识。为了最好的兼容，可以用以下方法获取网页文档中的元素： top参数等于1时取最上层窗口文档中的元素。

//获取对象 function getObject(objectId,top) { doc = top?window.top.document:document; if(typeof(objectId)!="object" && typeof(objectId)!="function") { if(doc.getElementById && doc.getElementById(objectId)) { // W3C DOM return doc.getElementById(objectId); } else if (doc.all && doc.all(objectId)) { // MSIE 4 DOM return doc.all(objectId); } else if (doc.layers && doc.layers[objectId]) { // NN 4 DOM.. note: this won't find nested layers return doc.layers[objectId]; } else { return false; } }else return objectId; }

2. window.event

(1)现有问题：IE：有window.event对象；FF：没有window.event对象
(2)解决方法：可以通过给函数的参数传递event对象

<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/> ... <mce:script language="javascript"><!-- function gotoSubmit(evt){ evt = evt ? evt : (window.event ? window.event : null); alert(evt);　// use evt } // --></mce:script>

3. event.x 与 event.y

(1)现有问题：在IE 中，event 对象有 x, y 属性，FF中没有
(2)解决方法：

　　在IE中，event.x 的值等于 event.clientX 的值等于 event.screenX 的值,event事件只认屏幕（即 window.screen.width） ，故此： ( event.x=event.clientX=event.screenX ) <= window.screen.width;

    在MF中，与event.x 等效的是event.clientX=event.screenX,也是以屏幕为准，MF还有 event.pageX 属性，以网页文档为准，但event.pageX IE中没有。

   如果想以屏幕为准：mX = event.x ? event.x : event.screenX; 或者都取 event.clientX 或 event.screenX 。

   如果想以文档为准：mX = event.x ? event.x + scrollLeft: event.pageX;

  (其中：scrollLeft=(document.body.scrollLeft==0?document.documentElement.scrollLeft:document.body.scrollLeft); //滚动条宽度)
(3)其它：两者都有event.clientX和event.clientY属性；通用标签的x和y的坐标位置：event.offsetLeft 和 event.offsetTop

4.添加事件

IE：element.attachEvent("onclick", func);

FF：element.addEventListener("click", func, true)

通用：element.οnclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如： element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。

5.自己定义的属性

(1)现有问题：在IE中，自己定义的属性可以用对象.属性来获得，例如objId.msg这样。但在FF中不能。

(2)解决方法：通用getAttribute("属性","值")来取得自定义属性值；用setAttribute("属性","值")来设置自定义的属性;