使用JS在Firefox与IE中要注意的地方
来源:互联网 发布:贱人程工具箱软件 编辑:程序博客网 时间:2024/06/10 10:53
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 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不一样
...{
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:
var style = win.document.createStyleSheet();
style.cssText = cssStr;
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);
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代码");
range.pasteHTML("HTML代码");
FireFox:
var r = window.getSelection().getRangeAt(0);
var oFragment = r.createContextualFragment(“HTML代码”);
r.deleteContents();
r.insertNode(oFragment);
var oFragment = r.createContextualFragment(“HTML代码”);
r.deleteContents();
r.insertNode(oFragment);
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);
- 使用JS在Firefox与IE中要注意的地方
- JS中select在firefox与ie之间的区别
- JavaScript在IE与Firefox几个写法不同的地方
- 【原创】今天发现CSS上的一点使用FLoat要注意的地方(FireFox+IE)
- firefox与IE中几处不同的地方
- jsp中使用EL表达式并且在js中使用该值需要注意的地方
- 在IE 和 Firefox 中兼容使用js
- 在IE 和 Firefox 中兼容使用js
- js在Firefox与IE中对DOM对像的引用的比较
- js在ie与firefox中不兼容的问题总结
- javascript在中ie与firefox的区别与解决方案
- javascript在中ie与firefox的区别与解决方案
- 在js中定义全局变量(IE,FireFox)
- ajax post中在firefox返回值一个值得注意的地方
- ajax post中在firefox返回值一个值得注意的地方
- ajax post中在firefox返回值一个值得注意的地方
- 在FLEX中使用CSS需要注意的地方
- 在SQLite中使用事务 注意的地方!
- c#用户控件暴露事件的写法
- 金山词霸即划即译设计随笔(三)
- 1个小时,9个问题
- XNA学习资源一箩筐
- javascript功能函数集锦
- 使用JS在Firefox与IE中要注意的地方
- 学习新事物:快乐寻找
- 一个分析Linux ARP日志的源代码程序
- 进程间通讯(IPC )方法集
- Berkeley DB使用全解
- 通过MEikEdwinObserver监控CEikEdwin
- MSN 8.1 优化
- 你应该知道的12个人生法则
- web元素 之 input (javascript)功能