兼容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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
Layui数据表格之单元格编辑方式
Oct 26 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
Python入门篇之列表和元组
2014/10/17 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python中常用信号signal类型实例
2018/01/25 Python
PyCharm代码格式调整方法
2018/05/23 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
好矿嫂事迹材料
2014/01/21 职场文书
农业项目投资意向书
2015/05/09 职场文书
酒会开场白大全
2015/06/01 职场文书
祝寿主持词
2015/07/02 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android