MyException - 我的异常网
当前位置:我的异常网» JavaScript » 惯用的兼容IE和火狐FF等浏览器的js方法

惯用的兼容IE和火狐FF等浏览器的js方法

www.MyException.Cn  网友分享于:2014-08-07  浏览:0次
常用的兼容IE和火狐FF等浏览器的js方法

这是一篇收集的文档,介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了。为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox 。以下进入正题:

//window.event
IE:有window.event对象
FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
解决方法:var event = event || window.event;一个示例:前端框架分享

<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 作为对象名的问题
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
解决方法:用 getElementById("idName") 代替 idName 作为对象变量使用

//用idName字符串取得对象的问题 前端框架分享 
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
解决方法:用 getElementById(idName) 代替 eval(idName)。

//变量名与某 HTML 对象 id 相同的问题
在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
解决方法:在声明变量时,一律加上 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";

//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

文章评论

漫画:程序员的工作
漫画:程序员的工作
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员必看的十大电影
程序员必看的十大电影
一个程序员的时间管理
一个程序员的时间管理
编程语言是女人
编程语言是女人
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
中美印日四国程序员比较
中美印日四国程序员比较
 程序员的样子
程序员的样子
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
那些争议最大的编程观点
那些争议最大的编程观点
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
代码女神横空出世
代码女神横空出世
程序员的鄙视链
程序员的鄙视链
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
如何成为一名黑客
如何成为一名黑客
每天工作4小时的程序员
每天工作4小时的程序员
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
10个调试和排错的小建议
10个调试和排错的小建议
程序员都该阅读的书
程序员都该阅读的书
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
老程序员的下场
老程序员的下场
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序员和编码员之间的区别
程序员和编码员之间的区别
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
鲜为人知的编程真相
鲜为人知的编程真相
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
为什么程序员都是夜猫子
为什么程序员都是夜猫子
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
我的丈夫是个程序员
我的丈夫是个程序员
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有