Javascript 多浏览器兼容总结(实战经验)


Posted in Javascript onOctober 30, 2013

一、document.formName.item(”itemName”) 问题
问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。
解决方法:统一使用document.formName.elements["elementName"]。

二、集合类对象问题
问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
解决方法:统一使用 [] 获取集合类对象。

三、自定义属性问题
问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。
解决方法:统一通过 getAttribute() 获取自定义属性。

四、eval(”idName”)问题
问题说明:IE下,可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName的HTML对象;Firefox下,只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
解决方法:统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题
问题说明:IE下,HTML对象的ID可以作为 document 的下属对象变量名直接使用,Firefox下则不能;Firefox下,可以使用与HTML对象ID相同的变量名,IE下则不能。
解决方法:使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var关键字,以避免歧义。

六、const问题
问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量。
解决方法:统一使用var关键字来定义常量。

七、input.type属性问题
问题说明:IE下 input.type 属性为只读;但是Firefox下 input.type 属性为读写。
解决办法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

八、window.event问题
问题说明:window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。
解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例:

<input type="button" onclick="doSomething(event)"/> 
<script language="javascript"> 
function doSomething(evt) { 
var myEvent = evt?evt:(window.event?window.event:null) 
... 
}

九、event.x与event.y问题
问题说明:IE下,even对象有x、y属性,但是没有pageX、pageY属性;Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。
解决方法:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题,就改用myEvent代替event即可。

十、event.srcElement问题
问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
解决方法:使用srcObj = event.srcElement ? event.srcElement : event.target;
如果考虑第8条问题,就改用myEvent代替event即可。

十一、window.location.href问题
问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。
解决方法:使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

十二、模态和非模态窗口问题
问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能。
解决方法:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话,使用 varsubWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

十三、frame和iframe问题
以下面的frame为例:
(1)访问frame对象
IE:使用window.frameId或者window.frameName来访问这个frame对象;
Firefox:使用window.frameName来访问这个frame对象;
解决方法:统一使用 window.document.getElementById(”frameId”) 来访问这个frame对象;
(2)切换frame内容
在IE和Firefox中都可以使用 window.document.getElementById(”frameId”).src =“webjx.com.html”或 window.frameName.location =“webjx.com.html”来切换frame的内容;
如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。

十四、body载入问题
问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证,待验证后再来修改。
[注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。

十五、事件委托方法
问题说明:IE下,使用 document.body.onload = inject; 其中function inject()在这之前已被实现;在Firefox下,使用 document.body.onload = inject();
解决方法:统一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别

十六、访问的父元素的区别
问题说明:在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode 来访问obj的父结点。

十七、innerText的问题
问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
解决方法:在非IE浏览器中使用textContent代替innerText。
示例:

if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = ";my text"; 
}

[注] innerHTML 同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。

十八、Table操作问题
问题说明:ie、firefox以及其它浏览器对于 table标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持,IE不支持
解决办法:把行插入到TBODY中,不要直接插入到表
解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
[注] 建议使用JS框架集来操作table,如JQuery。

十九、对象宽高赋值问题
问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法:统一使用 obj.style.height = imgObj.height + ‘px';

二十、setAttribute('style','color:red;')
FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持
解决办法:不用setAttribute('style','color:red')
而用object.style.cssText = ‘color:red;'(这写法也有例外)
最好的办法是上面种方法都用上,万无一失

二一、类名设置
setAttribute('class','styleClass')
FIREFOX支持,IE不支持(指定属性名为class,IE不会设置元素的class属性,相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法:
setAttribute('class','styleClass')
setAttribute('className','styleClass')
或者直接 object.className='styleClass';
IE和FF都支持object.className。

二二、用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持,IE不支持
解决办法:
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下:
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

二三、建立单选钮
IE以外的浏览器

var rdo = document.createElement('input'); 
rdo.setAttribute('type','radio'); 
rdo.setAttribute('name','radiobtn'); 
rdo.setAttribute('value','checked'); 
IE: 
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);

解决办法:
这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了
万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决。
Javascript 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
JSON 数据格式介绍
Jan 13 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
javascript实现的DES加密示例
Oct 30 #Javascript
js onload处理html页面加载之后的事件
Oct 30 #Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 #Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 #Javascript
JS复制到剪贴板示例代码
Oct 30 #Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 #Javascript
js同比例缩放图片的小例子
Oct 30 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
php读取excel文件的简单实例
2013/08/26 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
java判断三位数的实例讲解
2019/06/10 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
丧事答谢词大全
2015/09/30 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android