IE和Firefox下javascript的兼容写法小结


Posted in Javascript onDecember 10, 2008

1、发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性。
如:<input type="text" name="username" value="">
在IE下如下代码可以执行而在Firefox下却不可以:
<script>
alert(document.getElementById("username").value);
</script>
必须改为如下代码才可以:
<input type="text" name="username" id="username" value="">
以下为转载:
1. document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用. Firefox必须从源处加入event作参数传递。Ie忽略该参数,用window.event来读取该event。
解决方法:
IE&Firefox:
Submitted(event)"/> …
<script language="javascript">
function Submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}
</script>
window.open("b.html","","modal=yes,width=500,height=500,resizable=no,scrollbars=no");
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
10.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的兼容性问题。
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
Firefox:只能使用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来访问父窗口。例如:parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.
15. 事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
16. firefox与IE的父元素(parentElement)的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent。
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。
20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。

解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效
23. CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
24. 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;。
25. 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;
26. 对select的options集合操作
枚举元素除了[]外,selectName.options.item()也是可以的, 另外selectName.options.length, selectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素,否则会失败(本人试验如此)。
27. XMLHTTP的区别
//mf
if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest()
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // code for IE
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.
xmlhttp.open("GET",url,true)
xmlhttp.send()
}
}
}
28. innerHTML的区别
Firefox不支持innerHTML, 解决办法可以如下
rng = document.createRange();
el = document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()) //清除原有内容,加入新内容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
29. img的src刷新问题
在IE 下可以用<img id="pic" onclick= "this.src= 'aa.php'" src="aa.php" style="cursor: pointer"/> 可以刷新图片,但在FireFox下不行。主要是缓存问题,在地址后面加个随机数就解决了。编辑onclick事件代码如下: "this.src=this.src+'?'+Math.random()"

Javascript 相关文章推荐
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 #Javascript
JavaScript 拖拉缩放效果
Dec 10 #Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 #Javascript
一个判断email合法性的函数[非正则]
Dec 09 #Javascript
Javascript 表单之间的数据传递代码
Dec 04 #Javascript
Javascript !!的作用
Dec 04 #Javascript
js 深拷贝函数
Dec 04 #Javascript
You might like
Home Coffee Roasting
2021/03/03 咖啡文化
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php时间不正确的解决方法
2008/04/09 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python lambda的使用详解
2021/02/26 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
工厂总经理岗位职责
2014/02/07 职场文书
车间主任岗位职责
2014/03/16 职场文书
欢迎新生标语2015
2015/07/16 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
MySQL触发器的使用
2021/05/24 MySQL
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
Django框架中模型的用法
2022/06/10 Python