js 兼容性

与时俱进

博客园
社区
首页
新随笔
联系
管理
订阅

随笔- 1470 文章- 0 评论- 146

兼容IE和FF的js脚本做法（比较常用）

做BS开发就难免会用到javascript，而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们
下面是兼容IE和FF的js脚本做法和分解（部分选自网上，经本人整理），希望对大家有帮助。
/*以下以 IE 代替 Internet Explorer，以 MF/FF 代替 Mozzila Firefox */
//window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
解决方法：var event = event || window.event;
example:

//鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。
//鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
解决方法：

/**其他的兼容的解决方法类似，不再一一举例**/
//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.οnclick=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为例：

(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;。

Tag标签: javascript,兼容IE和FF

与时俱进
关注 - 3
粉丝 - 24

关注博主

(请您对文章做出评价)

« 上一篇：CSS选择器笔记

posted @ 2010-12-06 18:07 与时俱进阅读(5) 评论(0) 编辑收藏所属分类: JavaScript

注册用户登录后才能发表评论，请登录或注册，返回博客园首页。

IT新闻:
· 你是否有这5种“互联网异常情绪”？
· 中国发明基于脚的生物识别设备
· Wave接受成为ASF孵化器项目
· Gccgo编译器进入GCC
· Aplix公司宣布加入安全支付产业联盟
更多IT新闻...

知识库最新文章:

Google的系统工程师(SA)如何工作
详解PHP对构造方法的识别
怎样打造一个酷网站？
走向ASP.NET架构设计——第六章：服务层设计（前篇）
贪心算法——最小生成树

网站导航：
博客园首页 IT新闻个人主页闪存程序员招聘社区博问

China-pub 计算机图书网上专卖店！6.5万品种2-8折！
China-Pub 计算机绝版图书按需印刷服务

历史上的今天:
2009-12-06 Web开发必备Firefox组件:Web Developer和Firebug
2009-12-06 Debian 上用iRedMail和Pure-FTPd的虚拟邮件/FTP主机
2009-12-06 Savage 2：灵魂拷问者--Linux即时战略游戏
2009-12-06 一个命令轻轻松松重新初始化Ubuntu软件包
2009-12-06 2010年10家可能消失品牌：Sun和Moto上榜

相关搜索:
javascript 兼容IE和FF JavaScript

最简洁阅读版式：
兼容IE和FF的js脚本做法（比较常用）

公告

粉丝 - 24
关注 - 3
我的主页个人资料
我的闪存发短消息

<
2010年12月
>

日
一
二
三
四
五
六

28
29
30
1
2
3
4

5
6
7
8
9
10
11

12
13
14
15
16
17
18

19
20
21
22
23
24
25

26
27
28
29
30
31
1

2
3
4
5
6
7
8

搜索

常用链接

我的随笔
我的空间
我的短信
我的评论
更多链接

我的参与
我的新闻
最新评论
我的标签

我的标签

C#(180)
ASP.NET(110)
javascript(107)
Linux(71)
jQuery(46)
Excel(36)
winform(32)
VBA(30)
Nginx(28)
MySQL(27)

随笔分类

3D类(1) (rss)
Apache(8) (rss)
asp(27) (rss)
asp.net,C#(400) (rss)
BSD(11) (rss)
C,C++(8) (rss)
Css(27) (rss)
DirectX,OpenGL,ffmpeg,mencoder(34) (rss)
Dos和批处理(10) (rss)
DreamWeaver(1) (rss)
Exchange(1) (rss)
Firebird(29) (rss)
FireFox插件(5) (rss)
Flash,Actionscript,Flex(55) (rss)
Grub(9) (rss)
GTK(1) (rss)
Html(16) (rss)
IIS(21) (rss)
JavaScript(133) (rss)
JQuery(52) (rss)
json,xml(2) (rss)
lighttpd(2) (rss)
Linux(119) (rss)
Live-Cd(4) (rss)
Lucene(6) (rss)
Mono(6) (rss)
MsSql(22) (rss)
MySQL(30) (rss)
Nginx(24) (rss)
Oracle(22) (rss)
P2P(4) (rss)
PHP(8) (rss)
PostgreSQL(16) (rss)
Python(1) (rss)
Rewrite(7) (rss)
SEO(5) (rss)
Sqlite(6) (rss)
Squid(2) (rss)
ssl(8) (rss)
Tomcat(4) (rss)
UML建模(3) (rss)
VBA(37) (rss)
Visual Basic,VBS(21) (rss)
(2) (rss)
Windows技巧/注册表(12) (rss)
安全(34) (rss)
采集(17) (rss)
常用(41) (rss)
短信(1) (rss)
发音(5) (rss)
服务器(25) (rss)
负载均衡(6) (rss)
黑客(31) (rss)
后期制作(2) (rss)
集群(4) (rss)
接口(10) (rss)
经典语录(7) (rss)
口才、沟通、写作(5) (rss)
浏览器(23) (rss)
流媒体(3) (rss)
其它技术(4) (rss)
启动盘(7) (rss)
嵌入式开发(4) (rss)
摄影,摄像(4) (rss)
手机(4) (rss)
数据恢复(24) (rss)
数据库(96) (rss)
系统封装(4) (rss)
协议(3) (rss)
新闻(132) (rss)
虚拟机(7) (rss)
音乐、伴奏(8) (rss)
游戏(6) (rss)
在线编辑器(12) (rss)
正则式(11) (rss)

随笔档案

2010年12月 (4)
2010年11月 (11)
2010年10月 (41)
2010年9月 (24)
2010年8月 (36)
2010年7月 (19)
2010年6月 (85)
2010年5月 (25)
2010年4月 (82)
2010年3月 (155)
2010年2月 (96)
2010年1月 (55)
2009年12月 (147)
2009年11月 (116)
2009年10月 (245)
2009年9月 (130)
2009年8月 (69)
2009年7月 (6)
2009年6月 (9)
2009年5月 (21)
2009年4月 (58)
2009年3月 (37)

需要

阅读排行榜

1. grub引导U盘(集成常用工具/深山红叶PE工具箱V30/完美者U盘维护系统V8.1)(1562)
2. Chrome读音(1354)
3. C# WinForm控件、自定义控件整理（大全）(1190)
4. 让Ubuntu Tweak运行在Windows XP上(1158)
5. Microsoft.Office.Interop.Excel.dll下载(1102)
6. Autocad VBA初级教程(998)
7. Ubuntu 9.04 下载镜像地址(914)
8. 写入MBR的直接GRUB引导U盘启动DOS和PE实战(909)
9. Chrome 过滤广告插件暂替办法(846)
10. Chrome所有运行参数大曝光(805)

评论排行榜

1. 让Ubuntu Tweak运行在Windows XP上(6)
2. C#中Socket多线程编程实例(5)
3. JQUERY获取text,areatext,radio,checkbox,select值(4)
4. ASP.NET(c#)实现中英文域名查询(4)
5. 详细介绍ORACLE sqlplus命令(4)

60天内阅读排行

1. js 表格排序(编辑+拖拽+缩放)(153)
2. 如何对GridView行自动编号？(120)
3. javascript无缝滚动(111)
4. JavaScript：prototype属性使用说明(110)
5. javascript访问frame,iframe框架和href的定向(106)
6. JavaScript 仿LightBox内容显示效果(105)
7. 点击一个链接同时打开两个页面(100)
8. javascript页面表格排序(95)
9. sqlserver replace函数批量替换数据库中指定字段内指定内容(90)
10. 突破IE屏蔽限制弹出新窗口(89)

同里老宅院民居客栈

12590生活网

posted on 2010-12-06 21:34 lexus 阅读( ...) 评论( ...) 编辑收藏