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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 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
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
详谈js模块化规范
2017/07/07 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
让python json encode datetime类型
2010/12/28 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
新东网科技Java笔试题
2012/07/13 面试题
护理学专业求职信
2014/06/29 职场文书
自我推荐信怎么写
2015/03/24 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
小学生读书笔记
2015/07/01 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书