JavaScript在IE与Firefox中的兼容问题

1.document.formName.item
    问题详细描述:
    ie可以使用
document.formName.item(“itemName”) 或
document.formName.elements["elementName"]；
Firefox只能使用后者，例如下面代码不能在Firefox中使用：Document.formName.item(“itemName”)

    解決方法：
    统一使用
document.formName.elements["elementName"]

2. 使用()或[] 作为下标运算符
    问题详细描述:
    集合类对象取用时使用
()，在firefox中不能接受。
    解決方法：
    改用 []
作为下标运算。如：document.forms(“formName”) 改为
document.forms["formName"]。
   
或document.getElementsByName(“inputName”)(0)改为document.getElementsByName(“inputNameName”)[0]

3. 使用 window.event
    问题详细描述:
   
window.event无法在firefox上运行W3C不支持windows.event。
    解決方法：
   
可写成如下两种方式：
     
①调用js处传入event参数
     
Function gotoSubmit(evt) {
         
evt = evt ? evt : (window.event ? window.event :
null);alert(evt);
      }
     
<input type=”button” name=”someButton” value=”test1″
onclick=”javascript:gotoSubmit()”/>  
<input
type=”button”name=”someButton”value=”test2″onclick=”javascript:gotoSubmit(event)”/>

     
②不传event参数
     
var evt = window.event || arguments.callee.caller.arguments[0]; //
获取event对象

4.直接使用标签id作为对象名
    问题详细描述:
   
火狐中可以直接使用标签id，但ie中不可以，例如：
    function test() {       
         alert(inputTest.value);
    }
   
<input type=”input” id=”inputTest” />
   
火狐中可以取到文本框的值，ie中不能
    解決方法：
   
不要直接使用id

5.使用window.form名称
    问题详细描述:
   
ie中可以用window.formName取得该form，在Firefox中不能使用，例如：
   
<form name=”form1″ id=”form2″ >
   
window.form1可以取得form1对象，firefox不能取到
    解決方法：
   
使用document.getElementById_x_x()来取

6.使用const关键字
    问题详细描述:
    例如 const
constVar = 32;可以在firefox中使用，但在IE中是语法错误。
    解決方法：
   
统一使用var关键字来定义常量

7.打开新窗口
    问题详细描述:
   
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是旧版Firefox不支持。

    解決方法：
   
直接使用window.open(pageURL,name,parameters)方式打开新窗口。

8.document.all
    问题详细描述:
   
ie和新版本Firefox(3.0)可以兼容document.all，但并非标准。
    解決方法：
   
可以用getElementById(“*”) 或者
getElementByTagName(“*”)来代替尽量不要使用document.all属性.

9.使用parentElement
    问题详细描述:
   
IE中支持使用parentElement和parentNode获取父节点.
而firefox只可以使用parentNode.
    解決方法：
   
使用ParentNode和childNodes，符合W3C标准.

10.节点的removeNode()
    问题详细描述:
   
Firefox中节点没有removeNode方法
    解決方法：
    使用如下方法
Js代码Node.parentNode.removeChild(node); 

11.window.screen.Height
    问题详细描述:
   
在IE6、IE7中可以得到值,在IE8和firefox中不能取到.
    解決方法：
   
IE8区分大小写,使用window.screen.height ,window.screen.width .

12.
button标签的type属性
    问题详细描述:
   
在ie6，ie7下默认不写type属性的行为相当于<button type=”button”>，在ie8和firefox下不写type默认相当于<button type=”submit” >
    解決方法：
   
指定type属性，不使用默认

13.控件中没有定义id，只定义了name
    问题详细描述:
   
在ie里，一个控件，如果没有id，只有name的话，那么这个控件的id会默认为name的值Js中，document.getElementById_x_x(‘xxxx’);如果在只有name的情况下，IE会执行，而FireFox不会执行

    解決方法：
   
getElementById的参数统一使用id

14.GetElementsByName的参数为对象id
    问题详细描述:
   
使用id来取得对象，ie可以取到，firefox中不能，例如:
   
<input type=”input” id=”test”/>
    var test=document.getElementsByName(‘test’)[0].value;
   
ie可以取得”test”文本框输入的值，而firefox中不能取到。
    解決方法：
   
getElementsByName的参数使用name，不使用id

15.鼠标坐标
    问题详细描述:
   
ie可以使用event.x和event.y取得，firefox可以使用event.pageX和event.pageY
    解決方法：
   
都使用event.clientX和event.clientY属性来取值

16.取得日期年份
    问题详细描述:
    var date =new Date(); var year = date.getYear();
   
在firefox中，getYear()函数返回的是1900到1999间的两位十进制数字，比如1999年，返回是99；
如果年份超出了1999,就是一个3位的十进制数字，比如2000年，返回是100（99+1），2009返回的就是109（99+10）；

    解決方法：
   
取年份使用getFullYear()

17.链接标签中的事件
    问题详细描述:
   
<a href=”#” onclick=”javascript:showMess();”>test</a>
    function showMess(){   
      alert(“aaaa”);
      form1.submit();
    }
   
在ie中画面可以提交，在firefox中画面没有提交，并跑到页首
    解決方法：
    添加return
false;如下：
   
<a href=”#” onclick=”javascript:showMess();return false;”>test</a>  

18.链接标签中的事件
    问题详细描述:
   
<a href=”javascript:void(null)” onclick=”javascript:showMess();”>test</a>  

   
showMess()中有页面提交的话，在ie7和firefox中可以提交，在ie6中不能。
    解決方法：
   
<a href=”javascript:void(null)” onclick=”javascript:showMess();return false;”>test</a> 

 a href=”####”…… 统一成：
如果页面有跳转的话：<a href=”javascript:showMess()” >test</a>
 如果页面没跳转的话：<a href=”javascript:void(0);” onclick=”javascript:showMess();”>test</a>  

19.使用outerHTML
    问题详细描述:
   
ie和Firefox中都可以使用innerHTML，但是Firefox中没有outerHTML
    解決方法：
   
可使用以下代码代替实现outerHTML：
   
if(typeof(HTMLElement)!=“undefined“ && !window.opera){
       
HTMLElement.prototype.__defineGetter__(“outerHTML“,function()
           
{
     
      var a=this.attributes, str=“<“+this.tagName,i=0;for(;i<a.length;i++)
     
  
   if(a[i].specified) str+=““+a[i].name+‘=”‘+a[i].value+‘“‘;           
if(!this.canHaveChildren) return str+“ />“;
     
  
   return str+“>“+this.innerHTML+“</“+this.tagName+“>“;

           
});
       
HTMLElement.prototype.__defineGetter__(
       
“canHaveChildren“,function()
          
{
           
switch(this.tagName.toLowerCase())
             
{ case “area“: case “base“: case “basefont“:case “col“:  case “frame“: case “hr“:  case “img“:  case “br“:    case “input“:     case “link“: case “meta“:  case “isindex“:
case “param“:return false;
           
} return true; });}

20.
取得标签自定义属性
    问题详细描述:
   
ie可以直接根据取得，但firefox中必须使用getAttribute()方法，例如：
   
<span id=’span1′ time=’2008-8-8′>hello</span>在IE中可以使用 
document.getElementById_x_x(‘span1′).time，但firefox中不能取到
    解決方法：
   
取得自定义属性使用getAttribute()方法。
   
document.getElementById_x_x(‘span1′).getAttribute(‘time’)

21.innerText
    问题详细描述:
   
ie中可以使用innerText，firefox中没有innerText
    解決方法：
   
不要使用innerText