JavaScript中解决多浏览器兼容性23个问题的快速解决方法


Posted in Javascript onMay 19, 2016

一、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来访问父窗口。如果需要父窗口控制子窗口的话,使用 var subWindow = 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。

• 获取table的行数和列数

在IE中,获取行列数可以使用下面的代码:

var detailT= grid.gettable("11"); 
  //获取行的长度
  var r=detailT.rows.length; 
  //获取列的长度
  var l=detailT.cells.length;

而在火狐或谷歌中获取列的长度就是无效的。

解决方案:

var detailT= grid.gettable("11"); 
//获取行的长度
var r=detailT.rows.length;
//获取列的长度
var l=detailT.rows[0].cells.length;

十九、对象宽高赋值问题

问题说明: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中解决多浏览器兼容性23个问题的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 #Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 #Javascript
去除html代码里面的script正则方法
May 19 #Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 #Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 #Javascript
jquery显示隐藏元素的实现代码
May 19 #Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 #Javascript
You might like
PHP中PDO的错误处理
2011/09/04 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
戴尔美国官网:Dell
2016/08/31 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
财务会计岗位职责
2015/02/03 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
创业计划书之餐饮
2019/09/02 职场文书
python基础之停用词过滤详解
2021/04/21 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
Android存储中最基本的文件存储方式
2022/04/30 Java/Android