兼容IE和FF的js脚本代码小结(比较常用)


Posted in Javascript onDecember 06, 2010

/*以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox */

//window.event
IE:有window.event对象
FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
解决方法:var event = event || window.event;
example:

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

//用idName字符串取得对象的问题
(1)现有问题
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。

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

//frame问题
以下面的frame为例:
<frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
FF:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"
或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame),可以在frme中使用parent来访问父窗口。
例如:window.parent.document.form1.filename.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。

//CSS:透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。

//CSS:圆角
IE:不支持圆角。
FF:-moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。

//CSS:双线凹凸边框
IE:border:2px outset;。
FF:-moz- border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。

Javascript 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 #Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 #Javascript
jquery实现心算练习代码
Dec 06 #Javascript
初窥JQuery(二)事件机制(2)
Dec 06 #Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
jquery提升性能最佳实践小结
Dec 06 #Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 #Javascript
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
vue.js的安装方法
2017/05/12 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
js仿360开机效果
2019/12/26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python中自定义函数的教程
2015/04/27 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
初三政治教学反思
2014/01/30 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
同学会邀请函模板
2015/01/30 职场文书
护士医德考评自我评价
2015/03/03 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
利用Python实现模拟登录知乎
2022/05/25 Python