Javascript在IE和Firefox浏览器常见兼容性问题总结


Posted in Javascript onAugust 03, 2016

本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题。分享给大家供大家参考,具体如下:

表单

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

IE:只能使用var关键字来定义变量。

Firefox:可以使用const关键字或var关键字来定义变量。

解决方法:统一使用var关键字来定义变量。

input.type

input.type属性问题

IE:input.type属性为只读。

Firefox:input.type属性为读写。

window.event

window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。

Firefox:必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。

解决方法:

<script language="javascript"> 
function fun(e) { 
  e = e ? e : (window.event ? window.event : null); 
} 
</script>

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.

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 的兼容性问题。

window.location.href

IE或者Firefox2.0.x:可以使用window.location或window.location.href;

Firefox1.5.x:只能使用window.location

解决方法:使用window.location来代替window.location.href.

模态和非模态窗口

IE:可以通过showModalDialog和showModelessDialog打开模态和非模态窗口

Firefox:不能!

解决方法:直接使用window.open(pageURL, name, parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener;parWin.document.getElementById("Aqing").value = "Aqing";

frame

以下面的frame为例:

<frame src="xxx.html" id="frameId" name="frameName" />

1.访问frame对象:

[ ie中返回的为object , ff中会显示具体的类型 比如: object window ]

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="a";

body

IE:body必须在body标签被浏览器完全读入之后才存在。

Firefox:body在body标签没有被浏览器完全读入之前就存在。

事件委托方法

IE:

document.body.onload = inject; //function inject()在这之前已被实现

Firefox:

document.body.onload = inject();

父元素

Firefox与IE的父元素(parentElement)的区别

IE:obj.parentElement

Firefox:obj.parentNode

解决方法:因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

鼠标指针cursor

cursor:hand VS cursor:pointer

Firefox:不支持hand

IE:支持pointer

解决方法:统一使用pointer

内容文本

innerText在IE中能正常工作。但是innerText在FireFox中却不行,需用textContent。

解决方法:

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

对table的操作

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 = "a"; 
row.appendChild(cell);

options集合

对select的options集合操作

枚举元素除了[]外,SelectName.options.item()也是可以的,另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。

*注意在 add后赋值元素,否则会失败。

XMLHTTP

if (window.XMLHttpRequest) { 
  xmlhttp = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { // code for IE 
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
if (xmlhttp){ 
  xmlhttp.onreadystatechange = xmlhttpChange; 
  xmlhttp.open("GET",url,true); 
  xmlhttp.send(); 
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 #Javascript
JS简单获取及显示当前时间的方法
Aug 03 #Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 #Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 #Javascript
深入浅出讲解ES6的解构
Aug 03 #Javascript
JS模拟实现方法重载示例
Aug 03 #Javascript
jQuery数组处理函数整理
Aug 03 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue实现购物车的监听
2020/04/20 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python常见数制转换实例分析
2015/05/09 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python多线程的退出控制实现
2020/08/10 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
给老婆的搞笑检讨书
2014/01/12 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
房地产端午节活动方案
2014/08/24 职场文书
工作作风承诺书
2014/08/30 职场文书
个人批评与自我批评
2014/10/15 职场文书
辞职信怎么写
2015/02/27 职场文书
毕业实习单位意见
2015/06/04 职场文书
迎新年主持词
2015/07/06 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫