使用JS在Firefox与IE中要注意的地方
2007-09-13 15:07
676 查看
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" onclick="onMenuClick(); ">.....</div>
function onMenuClick()
{
collapseMenu(event.srcElement);
}
工作正常。不过在Firefox中，则改成：
<div class="menu" id="menu" onclick="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.onclick=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);
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" onclick="onMenuClick(); ">.....</div>
function onMenuClick()
{
collapseMenu(event.srcElement);
}
工作正常。不过在Firefox中，则改成：
<div class="menu" id="menu" onclick="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.onclick=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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【原创】今天发现CSS上的一点使用FLoat要注意的地方（FireFox＋IE）
- 【原创】今天发现CSS上的一点使用FLoat要注意的地方（FireFox＋IE）
- 用JS操作CSS滤镜,注意IE、firefox、chrome浏览器对滤镜支持各不相同
- jsp中使用EL表达式并且在js中使用该值需要注意的地方
- [js高手之路]使用原型对象(prototype)需要注意的地方
- 一个图片轮换显示的实现，使用DIV+JS，支持Firefox，IE，Safiri
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
- 在IE 和 Firefox 中兼容使用js
- JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
- 使用JS读取XML（兼容IE和firefox）
- JS 判断浏览器类型（是否使用IE,Firefox,Opera浏览器）(转)
- js年月日下拉框IE,Firefox,Opera浏览器都可以使用
- js中使用new Date(str)创建时间对象不兼容firefox和ie的解决方式
- 在IE 和 Firefox 中兼容使用js
- IE和火狐在js使用上的注意点
- 使用amazeui.min.js时要注意的地方
- [js高手之路]使用原型对象(prototype)需要注意的地方
- 一个图片轮换显示的实现，使用DIV+JS，支持Firefox，IE，Safiri
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]使用原型对象(prototype)需要注意的地方