使用JS在Firefox与IE中要注意的地方

1、取iFrame对象，用window["frameName"],其中frameName为要取的iFrame的name属性而不是id属性。

2、取对象，最好用document.getElementById("ID")取，这种取法在2种浏览器里都能正常取到。

3、Date对象的geYear()方法在两种浏览器取到的值不一样，

例如：2007年，在IE里取得的是2007，而在Firefox里取到的是107，如果要取年份，要用getFullYear()方法取。

4、使用style.display属性在两种浏览器里效果不一样，

例如一个iFrame,设document.getElementById("frameName").style.display="none";时，

在IE里，被隐藏的iFrame会一直存在（即在内存中没有释放），而在Firefox里则是释放掉了，

当设document.getElementById("frameName").style.display="";时，IE不用重新加载，而Firefox则需要重新加载iFrame，即iFrame里的内容是重新请求获得的。

5、异步请求不

var http_request = false;
var requestMsg = "";
function send_request(url,arg) 
...{
http_request = false;
if(window.XMLHttpRequest)//firefox
...{ 
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) 
    ...{
        http_request.overrideMimeType('text/xml');
    }
}
else if(window.ActiveXObject)//ie
...{
    try 
    ...{
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) 
                     ...{
        try 
        ...{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) 
        ...{
            alert("error!");
        }
    }
}

if (!http_request) 
...{
    alert("失败，请检查浏览器版本");
    return false;
}
if(window.XMLHttpRequest) 
...{
    http_request.onload = processRequestForFirefox;//Firefox没有onreadystatechange 事件和readyState属性
}
else if(window.ActiveXObject)
...{
    http_request.onreadystatechange = processRequest;
}

http_request.open("POST", url, false);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(arg);
}
//处理返回信息
//firefox
function processRequestForFirefox()
...{
    if(http_request.status == 200)
    ...{
        requestMsg = http_request.responseText;//取服务端的返回信息
    }
    else
    ...{
        alert("error");
    }
}
//IE
function processRequest() 
...{
    if(http_request.readyState == 4)
    ...{
        if(http_request.status == 200)
        ...{
            requestMsg = http_request.responseText;
        } 
        else
        ...{
            alert("error");
        }
    }
}

6、加载XML不一样

function FormRemove()
...{
    send_request("../url","xml="+xml);
    //alert(requestMsg);
    var xmlDoc = null;
    var loadResult = false;
    if(window.XMLHttpRequest) //firefox
    ...{
        var oParser = new DOMParser();
        xmlDoc = oParser.parseFromString(requestMsg,"text/xml");
        xmlDoc.async = "false";//false表示同步加载
                                           //firefox中如果发现载入的XML不是有效的XML格式，则会载入一个以<parsererror>为根接点的文档
        if(xmlDoc.documentElement.tagName != "parsererror")
        ...{
            loadResult = true;
        }
    }
    else if(window.ActiveXObject)//ie
    ...{
        xmlDoc = new ActiveXObject("MSXML2.DOMDocument");
        xmlDoc.async = "false";
        loadResult = xmlDoc.loadXML(requestMsg);
    }
    if(loadResult == true)
    ...{
        var nodeResult = xmlDoc.documentElement.firstChild;
        if(nodeResult != null)
        ...{
            var result = nodeResult.getAttribute("Status");
            if(result != null && parseInt(result) == 0)
            ...{
                //operator success
            }
            else
            ...{
                //operator failure
            }
        }
        else
        ...{
            alert("无效的返回值");
        }
    }
    else
    ...{
        alert("加载返回结果失败");
    }
}

------------------------------------------------------------------------------------------------------------------------

转自其他人总结的不同点:

1、创建一个Element，通用的写法为createElement("div")
   IE中也可以这样写createElement("<div style='color:#FFFFFF'>")，但Firefox不认
2、IE中的width、height与Firefox中概念不同，IE中width=FireFox中的width+2*borderWidth+2*Padding
   参见：http://help.powereasy.net/Template/WEB/1557.html
3、动态添加css代码
   IE：

cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createStyleSheet();
style.cssText = cssStr;

 

FireFox：

 

cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createElement("style"); 
style.type = "text/css"; 
style.innerHTML = cssStr; 
win.document.getElementsByTagName("HEAD").item(0).appendChild(style); 

4、table在后面添加加行或列，通用写法insertRow(-1),insertCell(-1)
   IE中insertRow(),insertCell()这样写也可以，Firefox不认
5、警告对话框alert()，IE中书写时无参数则默认参数为空字符串，Firefox中则必须输入参数，传空参数则要写成alert("");
6、给element.style.width赋值必须写成24px，只写数字24的话，FireFox会不认，IE里都可以
7、在使用Element，并给其绑定了onclick、onmouseover、onmousedown、onmouseout等事件
    element.onclick = function() { alert("hello kitty"); };
   时，需注意
   将此元素添加到上级元素上时要用appendChild，不可以在上级中使用innerHTML操作，这样会使事件无效
8、获得事件和事件源
   IE：事件：window.event
      事件源：window.event.srcElement
   FireFox：事件：arguments.callee.caller.arguments[0]
              事件源：arguments.callee.caller.arguments[0].target
9、在选中区域粘贴HTML
   IE：

var r = window.document.selection.createRange();
range.pasteHTML("HTML代码");

FireFox：

var r = window.getSelection().getRangeAt(0);
var oFragment = r.createContextualFragment(“HTML代码”); 
r.deleteContents();
r.insertNode(oFragment); 

===============================================================

1. document.all

 Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*)来代替

 不过对于document.all.length等属性，则完全不兼容。

2. parentElement

 这个也不兼容。比方说， obj.parentElement.name 则应改成 obj.parentNode.attributes.getNamedItem("name").nodeValue （不知道如何写得更简洁些）

3. event

 W3C不支持windows.event

 比方说:

    在IE里面

          <div class="menu" id="menu" οnclick="onMenuClick(); ">.....</div>

      function onMenuClick()

      {

        collapseMenu(event.srcElement);

      }

    工作正常。不过在Firefox中，则改成：

 

        <div class="menu" id="menu" οnclick="onMenuClick(event); ">

        function onMenuClick(evt)

      {

        if(evt == null)

              evt = window.event; // For IE

          var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target

        collapseMenu(srcElement);

}

 

1：innerText
IE支持，FIREFOX不支持
解决办法：用innerHTML,2种浏览器都识别innerHTML

2：document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表

3：setAttribute('style','color:red;')
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute('style','color:red')
而用object.style.cssText = 'color:red;'(这写法也有例外)
最好的办法是上面种方法都用上，万无一失 ^_^
4:class
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
2种都用上

5:用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById('objId');
obj.οnclick=function(){fucntionname();};
这种方法所有浏览器都支持

6：建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE:
var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>";
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

0：共同的一些技巧
在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错

好习惯：var btn = document.createElement('input');
btn.setAttribut('type','button');
document.getElementById('formId').appendChild(btn);