IE、FF的JS兼容写法

做 BS 开发就难免会用到 javascript ，而每个浏览器对 javascript 的支持有不同。这就需要我们程序员去兼容他们
下面是兼容 IE 和 FF 的 js 脚本做法和分解（部分选自网上，经本人整理），希望对大家有帮助。    


/* 以下以 IE 代替 Internet Explorer ，以 MF/FF 代替 Mozzila Firefox  */  

//window.event    
IE ：有 window.event 对象     
FF ：没有 window.event 对象。可以通过给函数的参数传递 event 对象。如 onmousemove=doMouseMove(event) 
解决方法： var   event  =  event  ||  window.event; 
example:
<script>
        function   test(event) {
             var   event  =  event  ||  window.event;
             //do Something
       }
</script>
<input type="button"  value="click"  onclick="test(event)"/>


// 鼠标当前坐标     
IE ： event.x 和 event.y 。     
FF ： event.pageX 和 event.pageY 。     
通用：两者都有 event.clientX 和 event.clientY 属性。     

// 鼠标当前坐标 ( 加上滚动条滚过的距离 )    
IE ： event.offsetX 和 event.offsetY 。     
FF ： event.layerX 和 event.layerY 。
解决方法：
<script>
        function   test(event) {
             var   event  =  event  ||  window.event;
             //or var event = event ? event : window.event;// 这 2 中都可以，也可以用 if else （这简写）
             var   x  =  event.offsetX  ||  event.layerX;
             var   y  =  event.offsetY  ||  event.layerY;
             //do Something
       }
</script>    
<div onmousedown="test(event)"></div> 
/** 其他的兼容的解决方法类似，不再一一举例 **/

//event.srcElement 问题     
说明 :IE 下 ,event 对象有 srcElement 属性 , 但是没有 target 属性 ;Firefox 下 ,even 对象有 target 属性 ,
但是没有 srcElement 属性 .    
解决方法 : 使用 obj(obj  =  event.srcElement  ?  event.srcElement : event.target;)
来代替 IE 下的 event.srcElement 或者
Firefox 下的 event.target. 请同时注意 event 的兼容性问题。    

//event.toElement 问题     
问题：     
IE 下， even 对象有 srcElement 属性，但是没有 target 属性；
Firefox 下， even 对象有 target 属性，但是没有 srcElement 属性     
解决方法：     
var   target  =  e.relatedTarget  ||  e.toElement;    

// 标签的 x 和 y 的坐标位置： style.posLeft 和 style.posTop    
IE ：有。     
FF ：没有。     
通用： object.offsetLeft 和 object.offsetTop 。     

// 窗体的高度和宽度     
IE ： document.body.offsetWidth 和 document.body.offsetHeight 。注意：此时页面一定要有 body 标签。     
FF ： window.innerWidth 和 window.innerHegiht ，
以及 document.documentElement.clientWidth 和 document.documentElement.clientHeight 。     
通用： document.body.clientWidth 和 document.body.clientHeight 。     

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

// 标签的自定义属性     
IE ：如果给标签 div1 定义了一个属性 value ，可以 div1.value 和 div1["value"] 取得该值。     
FF ：不能用 div1.value 和 div1["value"] 取。     
通用： div1.getAttribute("value") 。     

//document.form.item 问题    
IE: 现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行    
FF/IE: document.formName.elements["elementName"]   

// 集合 / 数组类对象问题    
(1) 现有问题：    
    现有代码中许多集合类对象取用时使用 () ， IE 能接受， MF 不能。    
(2) 解决方法：    
    改用 [] 作为下标运算。如： document.forms("formName") 改为 document.forms["formName"] 。    
    又如： document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]   

//HTML 对象的 id 作为对象名的问题    
(1) 现有问题    
     在 IE 中， HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。    
(2) 解决方法    
     用 getElementById("idName") 代替 idName 作为对象变量使用    

// 用 idName 字符串取得对象的问题    
(1) 现有问题    
     在 IE 中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在 MF 中不能。    
(2) 解决方法    
     用 getElementById(idName) 代替 eval(idName) 。    

// 变量名与某 HTML 对象 id 相同的问题    
(1) 现有问题    
    在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名， IE 中不能。    
(2) 解决方法    
    在声明变量时，一律加上   var   ，以避免歧义，这样在 IE 中亦可正常运行。    
    此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。    

//document.getElementsByName() 和 document.all[name] 的问题    
现有问题：在 IE 中， getElementsByName() 、 document.all[name] 均不能用来取得 div 元素
（是否还有其它不能取的元素还不知道）。    
//document.all   
Firefox 可以兼容 document.all ， 但会生成一条警告。可以用 getElementById("*") 
或者 getElementByTagName("*") 来代替    
不过对于 document.all.length 等属性，则完全不兼容    

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

//window.location.href 问题     
说明 :IE 或者 Firefox2.0.x 下 , 可以使用 window.location 或 window.location.href;Firefox1.5.x 下 ,
只能使用 window.location   
解决方法 : 使用 window.location 来代替 window.location.href   

// 模态和非模态窗口问题     
说明 :IE 下 , 可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口 ;Firefox 下则不能    
解决方法 : 直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。     
如果需要将子窗口中的参数传递回父窗口 , 可以在子窗口中使用 window.opener 来访问父窗口 . 
例如： var   parWin  =  window.opener; parWin.document.getElementById("Aqing").value  =  "Aqing";    

//frame 问题     
以下面的 frame 为例：     
<frame src="xxx.html"  mce_src="xxx.html"  id="frameId"  name="frameName"  />    
(1) 访问 frame 对象 :    
IE: 使用 window.frameId 或者 window.frameName 来访问这个 frame 对象 . frameId 和 frameName 可以同名。     
FF: 只能使用 window.frameName 来访问这个 frame 对象 .    
另外，在 IE 和 Firefox 中都可以使用 window.document.getElementById("frameId") 来访问这个 frame 对象 .    
(2) 切换 frame 内容 :    
在 IE 和 Firefox 中都可以使用 window.document.getElementById("testFrame").src  =  "xxx.html"
或 window.frameName.location  =  "xxx.html" 来切换 frame 的内容 .    
如果需要将 frame 中的参数传回父窗口 ( 注意不是 opener, 而是 parent frame) ，可以在 frme 中使用 parent 来访问父窗口。
例如： window.parent.document.form1.filename.value="Aqing";    

//body 问题     
Firefox 的 body 在 body 标签没有被浏览器完全读入之前就存在；而 IE 的 body 则必须在 body 标签被浏览器完全读入之后才存在    

// 事件委托方法     
IE ： document.body.onload  =  inject;  //Function inject() 在这之前已被实现     
FF ： document.body.onload  =  inject();    

//firefox 与 IE 的父元素 (parentElement) 的区别     
IE ： obj.parentElement    
FF ： obj.parentNode    
解决方法 : 因为 FF 与 IE 都支持 DOM, 因此使用 obj.parentNode 是不错选择    

//innerText 在 IE 中能正常工作，但是 innerText 在 FireFox 中却不行 . 需用 textContent   

//FireFox 中设置 HTML 标签的 style 时，所有位置性和字体尺寸的值必须后跟 px 。这个 ie 也是支持的    

// 父节点、子节点和删除节点     
IE ： parentElement 、 parement.children ， element.romoveNode( true ) 。     
FF ： parentNode 、 parentNode.childNodes ， node.parentNode.removeChild(node) 。     

// 对 select 的 options 集合操作     
枚举元素除了 [] 外， SelectName.options.item() 也是可以的 , 另外 SelectName.options.length, 
SelectName.options.add/remove 都可以在两种浏览器上使用。    
注意在 add 后赋值元素，否则会失败    
动态删除 select 中的所有 options ：     
       document.getElementById("ddlResourceType").options.length=0;    
动态删除 select 中的某一项 option ：     
       document.getElementById("ddlResourceType").options.remove(indx);     
动态添加 select 中的项 option:    
       document.getElementById("ddlResourceType").options.add( new   Option(text,value));    
IE FF 动态删除通用方法：    
document.getElementById("ddlResourceType").options[indx]  =  null ;   

// 捕获事件     
问题：     
FF 没有 setCapture() 、 releaseCapture() 方法     
解决方法：     
IE:    
obj.setCapture();    
obj.releaseCapture();    
FF:    
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);    
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);    
if   (!window.captureEvents) {    
       o.setCapture();    
} else   {    
       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);    
}    
if   (!window.captureEvents) {    
       o.releaseCapture();    
} else   {    
       window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);    
}    


// 禁止选取网页内容     
问题：     
FF 需要用 CSS 禁止， IE 用 JS 禁止     
解决方法：     
IE: obj.onselectstart  =  function () { return   false ;}    
FF:  -moz-user-select:none;    


// 画图     
IE ： VML 。     
FF ： SVG 。     

//CSS ：透明     
IE ： filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60) 。     
FF ： opacity:0.6 。     

//CSS ：圆角     
IE ：不支持圆角。     
FF ： -moz-border-radius:4px ，或者 -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;-moz-border-radius-  bottomright:4px; 。     

//CSS ：双线凹凸边框     
IE ： border:2px outset; 。     
FF ： -moz-  border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040  #808080;-moz-border-bottom-colors:#404040  #808080; 。  


本文来自 CSDN 博客，转载请标明出处： http: //blog.csdn.net/IBM_hoojo/archive/2010/07/02/5708440.aspx