JS兼容性问题（FF与IE）
不同浏览器中js兼容问题大全
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.window.event问题
说明：
window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法：
document.onmousemove=function (ev){
var oDiv=document.getElementById('div1');
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
}
6.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
复杂点要考虑绝对位置：
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert( " x: " + x + " , " + " y: " + y);
}
7.事件监听
说明：
IE提供了attachEvent和detachEvent两个接口；
而Firefox提供 的是 addEventListener和removeEventListener两个接口；
解决方法：
if(oBtn.attachEvent){
oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb);
}
else{
oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);
}
例子（事件绑定的公共函数）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function myAddEvent(obj, sEvent, fn){ //绑定事件
if(obj.attachEvent){
obj.attachEvent('on'+sEvent, fn);
}
else{
obj.addEventListener(sEvent, fn, false);
}
} function aaa(){
alert('a');
} function bbb(){
alert('b');
} window.onload=function (){
var oBtn=document.getElementById('btn1'); myAddEvent(oBtn, 'click', aaa);
myAddEvent(oBtn, 'click', bbb);
};
</script>
</head> <body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>
8.事件源的获取
说明：
在使用事件委托的时候，通过 事件源获取来判断事件到底来自哪个元素，但是，在IE 下，event对象有srcElement属性，但是 没有target属性；Firefox下，even对象有target 属性，但是没有srcElement属性。
解决方法：
ele = function (evt){ // 捕获当前事件作用的对象
evt = evt || window.event;
return
(obj=event.srcElement?event.srcElement:event.target; );
}
dom方法及对象引用
9.frame的引用
说明：
IE可以通过id或者name访问这个frame对应的window对象，而Firefox只可以通过 name来访问这个frame对 应的window对象；
解决方法：
使用frame的name来访问frame对 象，另外，在IE和Firefox中都可以使用 window.document.getElementById(”frameId”)来访问这个frame对象。
10.parentElement
说明：
IE中支持使用parentElement和parentNode获取父节点。而 Firefox只可以使用parentNode。
解决方法：
因为firefox支持DOM，因此统一使用 parentNode来访问父节点。
11.table操作
说明：
IE下 table中无论是用innerHTML还是appendChild插入<tr>都没有效果，而其他浏览器却显示正常。
解决方法：
解决的方法是，将<tr>加到table的<tbody>元素中。
例子：
var row = document.createElement( "tr" );
var cell = document.createElement( "td" );
var cell_text = document.createTextNode( "插入的内容" );
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName( "tbody" )[0].appendChild(row);
12.移除节点removeNode()和removeChild()
说明：
appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。
removeNode方法的功能是删除一个节点，语法为node.removeNode（false）或者 node.removeNode（true），返回值是被删除的节点。
removeNode（false）表示仅仅删除指定节点，然 后这个节点的原孩子节点提升为原双亲节点的孩子节点。
removeNode（true）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。
解决方法：
Firefox中节点没有removeNode方法，只能用 removeChild方法代替，先回到父节点，在从父节点上移除要移除的 节点。
//通过判断浏览器类型来兼容：
if(document.all)
document.getElementById('element').innerText = "mytext" ;
}else{
document.getElementById('element').textContent = "mytext" ;
}
14.document.getElementsByClassName
说明：
getElementsByClassName不能兼容IE9之前的浏览器
解决办法：自己封装个函数。用getElementsByTagName
例子（以简易选项卡为例子）：
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
var oTab = document.getElementById('tab');
var aLi = getByClass(oTab, 'nav')[0].getElementsByTagName('li'); //使用getByClass方法
var aA = oTab.getElementsByTagName('ul')[0].getElementsByTagName('a');
var aDiv = getByClass(oTab, 'box'); //使用getByClass方法
var i = 0; aDiv[0].style.display = 'block'; for(i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].onclick = function(){
for(i=0; i<aLi.length; i++){
aLi[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
aA[i].onfocus=function(){
this.blur();
};
}
};
function getByClass(oParent, sClassName){
var aElm=oParent.getElementsByTagName('*');
var aArr = [];
for(var i=0; i<aElm.length; i++){
if(aElm[i].className == sClassName){
aArr.push(aElm[i]);
}
}
return aArr;
}
</script>
<style type="text/css">
div,li,ul{padding:0; margin:0;}
.box{display:none; height:200px; width:300px; background:#739582; border:1px solid green;}
li{list-style:none; float:left; padding:5px 0; text-align:center; background:green; width:100px;}
</style>
</head>
<body>
<div id="tab">
<div class="nav">
<ul>
<li class="active"><a>111</a></li>
<li><a>222</a></li>
<li><a>333</a></li>
</ul>
</div>
<div class="contentbox">
<div class="box" style="display:block">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
</div>
</div>
</body>
</html>
但是呢，使用jquery就简单的多啦，$('.box')就搞定啦，所以个人建议使用jquery。
浏览器不兼容真的很麻烦，但是呢，总会找到解决的方法的。
JS兼容性问题（FF与IE）的更多相关文章
- ff与ie 的关于js兼容性
FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的.但它主要检查FF方面的错误,对IE就无能为力了.要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不到测 ...
- IE 和Firefox的js兼容性总结
IE 和Firefox的js兼容性总结 12 August 2010 11:39 Thursday by 小屋 标签: 浏览器 方法 属性 IT 写法 一.函数和方法差异 1 . getYear()方 ...
- webpack 之js兼容性处理
webpack 之js兼容性处理 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = require( ...
- js兼容性问题总结
JS中出现的兼容性问题的总结1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行外 ...
- js兼容性记录
做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...
- js兼容性大全
js有个第二定律好的属性/选择器一定不兼容/* 获取类名通用代码*/function getClassName(){ if(document.getElementsByClassName){ doso ...
- js兼容性大全（持续更新）
javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不 ...
- JS兼容性问题列表
记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会随着开发遇到问题而更新,标记为黄色的为未解决和猜测答案 提出时间 问题描述 解决方案 2014/10/22 submit按钮阻止了默认事件不能 ...
- JS兼容性总结
获取样式obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; //currentStyle为IE 滚动条 v ...
随机推荐
- Tesla为什么要公开专利
这是今天在网上看到Tesla公司的专利墙图片,还是比较有视觉冲击力的,正好可以转来当配图. 业界先锋Tesla日前惊世骇俗地公开电动汽车专利,赢得如潮好评:不过大家都知道,对于西方科技公司,专利历来是 ...
- SQLServer 语句-创建索引【转】
语法:CREATE [索引类型] INDEX 索引名称ON 表名(列名)WITH FILLFACTOR = 填充因子值0~100GO /*实例*/USE 库名GOIF EXISTS (SELECT * ...
- Educational Codeforces Round 11 C. Hard Process 前缀和+二分
题目链接: http://codeforces.com/contest/660/problem/C 题意: 将最多k个0变成1,使得连续的1的个数最大 题解: 二分连续的1的个数x.用前缀和判断区间[ ...
- WEB前端常用的测试工具
一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架, ...
- 【树形DP/搜索】BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会
1827: [Usaco2010 Mar]gather 奶牛大集会 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 793 Solved: 354[Sub ...
- 解决asp.net mvc中*.resx资源文件访问报错
个人笔记 问题重现 在asp.net mvc中,使用资源文件会出现一个问题,例如: 紧接着我进入视图界面,输入下面代码: <a href="javascript:void(0);&qu ...
- [转载]Spring Autowire自动装配介绍
转自: http://www.cnblogs.com/zhishan/p/3190757.html 在应用中,我们常常使用<ref>标签为JavaBean注入它依赖的对象.但是对于一个大型 ...
- Java Notes
1．java是解释型语言.java虚拟机能实现一次编译多次运行. 2．JDK(java software Development kit 软件开发包),JRE(java Runtime Environ ...
- HDU 1882 Strange Billboard(位运算)
题目链接 题意 : 给你一个矩阵,有黑有白,翻转一个块可以让上下左右都翻转过来,问最少翻转多少次能让矩阵变为全白. 思路 : 我们从第一行开始枚举要翻转的状态,最多可以枚举到2的16次方,因为你只要第 ...
- 【转载】Eclipse自动编译问题
今天调试的时候发现问题:调试的时候竟然在我注释的里面走,当时那个郁闷啊,每次都要clean下才可以,晚上感觉不对劲,上网查了查,原来是bulid automatically这个我把勾去掉了,下面是原文 ...