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 相关文章推荐
有道JavaScript监听浏览器的问题
Jun 23 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
详解vue挂载到dom上会发生什么
Jan 20 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
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
高一政治教学反思
2014/01/28 职场文书
师德学习感言
2014/01/31 职场文书
幸福家庭标语
2014/06/27 职场文书
中国梦团日活动总结
2014/07/07 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
学生上课说话检讨书
2014/10/25 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
源码解读Spring-Integration执行过程
2021/06/11 Java/Android