JS常见的兼容性问题汇总
JS常见的兼容性问题汇总
- 1> 滚动条:
document.documentElement.scrollTop || document.body.scrollTop
- 2> 获取样式兼容
function getStyle(dom, styleName){return dom.currentStyle? dom.currentStyle[styleName] : getComputedStyle(dom)[styleName];
}
- 3> 网页可视区域兼容
window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidth
- 4) 事件对象兼容
evt = evt || window.event;
- 5) 阻止事件冒泡兼容
event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true;
- 6)阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
- 7)事件监听兼容
if(document.all){dom.attactEvent(“onclick”, fn);
} else {dom.addEventListener(“click”, fn);
}
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子
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.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById(“idName”)代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用. Firefox必须从源处加入event作参数传递。Ie忽略该参数,用window.event来读取该event。
解决方法:
IE&Firefox:
Submitted(event)"/> …
function Submitted(evt) {evt=evt?evt:(window.event?window.event:null);
}
9.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.10.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的兼容性问题。11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location
或window.location.href
;Firefox1.5.x下,只能使用window.location
.
解决方法:使用window.location
来代替window.location.href
.12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)
方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1) 访问frame对象:
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="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.15.事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();16.firefox与IE的父元素(parentElement)的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode
是不错选择.17.
cursor:hand
VScursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer18.innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent。
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){document.getElementById('element').innerText = "my text";
} else {document.getElementById('element').textContent = "my text";
}
19.FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。
20.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 = "XXXX";
row.appendChild(cell);
21.padding 问题
padding 5px 4px 3px 1px;
FireFox无法解释简写,
必须改成padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22.消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效23.CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
.
FF:opacity:0.6
。24.CSS圆角
IE:不支持圆角。
FF:-moz-border-radius:4px
,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;
.25.CSS双线凹凸边框
IE:border:2px outset;
。
FF:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
26.对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length
,SelectName.options.add/remove
都可以在两种浏览器上使用。注意在add后赋值元素,否则会失败(本人试验如此)。27.XMLHTTP的区别
//FF
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest()xmlhttp.onreadystatechange=xmlhttpChangexmlhttp.open("GET",url,true)xmlhttp.send(null)
}
//IE
else if (window.ActiveXObject) {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")if (xmlhttp) {xmlhttp.onreadystatechange=xmlhttpChangexmlhttp.open("GET",url,true)xmlhttp.send()}
}
- 28.innerHTML的区别
Firefox不支持innerHTML, 解决办法可以如下
rng = document.createRange();
el = document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()) //清除原有内容,加入新内容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);
分类: javascript
关于用“索引”获取字符串每一项出现的兼容性问题:
对于字符串也有类似于数组 这样的通过 下标索引 获取每一项的值,
var str=“abcde”;
alert(str[1]);
但是低版本的浏览器IE6,7不兼容
解决方法:str.charAt(i) //全部浏览器都兼容 var str="abcde"; for(var i=0;i<str.length;i++){alert(str.charAt(i)); //放回字符串中的每一项 }
关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时:
我们一般通过这两个方法获取行外样式:
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容两个浏览器的写法:if(oDiv.currentStyle){alert(oDiv.currentStyle.width);} else {alert(getComputedStyle(oDiv,false).width);}
*注:在解决很多兼容性写法时,都是用if…else…
封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)
funtion getStyle(obj,name){if (obj.currentStyle) {//IEreturn obj.currentStyle[name];} else {//Chrom,FFreturn getComputedStyle(obj,false)[name];}}getStyle(oDiv,'width');
- 关于DOM中 childNodes 获取子节点出现的兼容性问题
childNodes:获取子节点,
–IE6-8:获取的是元素节点,正常
–高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法: 使用nodeType:节点的类型,并作出判断
–nodeType=3–>文本节点
–nodeTyPE=1–>元素节点
例: 获取ul里所有的子节点,让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){if(oUl.childNodes[i].nodeType==1){oUl.childNodes[i].style.background='red';}
}
备注:上面childNodes为我们带来的困扰完全可以有children属性来代替。
children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器,
比上面的好用所以我们一般获取子节点时,最好用children属性。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
关于使用 firstChild,lastChild 等,获取第一个/最后一个元素节点时产生的问题
–IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点
(高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点)
–高版本浏览器下:firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本浏览器IE6-8不兼容)
–兼容写法: 找到ul的第一个元素节点,并将其背景色变成红色var oUl=document.getElementById('ul'); if(oUl.firstElementChild){//高版本浏览器oUl.firstElementChild.style.background='red'; }else{//IE6-8oUl.firstChild.style.background='red'; }
关于使用 event对象,出现的兼容性问题
如: 获取鼠标位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参ev–> ev.clientX;ev.clientY
获取event对象兼容性写法:var oEvent==ev||event;document.oncilck=function(ev){var oEvent==ev||event;if(oEvent){alert(oEvent.clientX);}}
关于为一个元素绑定两个相同事件:attachEvent/attachEventLister 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if…else…)
IE8以下用: attachEvent(‘事件名’,fn);
FF,Chrome,IE9-10用: attachEventLister(‘事件名’,fn,false);
多事件绑定封装成一个兼容函数:function myAddEvent(obj,ev,fn){if(obj.attachEvent){//IE8以下obj.attachEvent('on'+ev,fn);}else{//FF,Chrome,IE9-10obj.attachEventLister(ev,fn,false);} } myAddEvent(oBtn,'click',function(){alert(a); }); myAddEvent(oBtn,'click',function(){alert(b); });
关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
IE,Chrome:document.body.scrollTop
FF:document.documentElement.scrollTop
解决方法:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
就总结到这里了~
JS常见的兼容性问题汇总相关推荐
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- 常见浏览器兼容性问题大全
常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
- CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总 一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...
- html select ios 闪屏,移动端常见的兼容性问题.md
# 移动端常见的兼容性问题 ###### 1. meta 基础知识点如下 ``` // 启动或禁用自动识别页面中的电话号码 // 启动或禁用自动识别邮箱地址 // 设置 Web 应用是否以全屏模式运行 ...
- 常见前端面试问题汇总2018
转载请注明来源 --------------------- 作者:MrCris 来源:CSDN 原文:https://blog.csdn.net/weixin_37861326/article/ ...
- 我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...
- C#中不常见的运算符功能汇总
介绍 C#有很多运算符,可分为以下几种:算数运算符,比较运算符,条件运算符,赋值运算符,逻辑运算符.下面对不常见的运算符进行汇总. 概念 条件运算符 ?(可空类型修饰符) 引用类型可以使用空引用表示一 ...
- Moment.js常见用法总结
From: https://www.jianshu.com/p/9c10543420de Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中 ...
- 常见浏览器兼容性问题及解决方案
常见浏览器兼容性问题及解决方案: 1.不同浏览器的默认内外边距和内外补丁不同. 解决方案:css设置 *{margin:0; padding:0;} *是通配符,匹配所有html标签. 2.块级元素f ...
- Moment.js常见用法总结 1
Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...
最新文章
- 在pycharm中无法引入同一目录下的python文件
- W7程序计算机面板介绍,win7系统隐藏任意程序运行界面的详细步骤
- 物理实验计算机仿真单摆实验,大学物理实验仿真实验实验报告.doc
- [YTU]_2566( 虚基类练习:动物)
- EFCore Lazy Loading + Inheritance = 干净的数据表 (二)
- uniapp增加百度统计代码(h5)
- ubuntu rpm安装_为什么说Ubuntu是一个值得尊敬的Linux发行版
- C++新特性探究(十):Lambda
- Chrome 成为互联网看门人?!
- 技术小故事-Activity的Launch Mode引起的动画“疑案”
- IDEA格式化js代码
- CSMA/CD和拥塞控制AIMD其实是一回事!
- 电源技术中的onsemi ESD5B5.0ST1G,ESD9B3.3ST5G,ESD9B5.0ST5G,SZESD9B5.0ST5G,ESD静电保护管 TVS管 电容值低,反应速度快的解决方案
- 【LinuxOS】Ubuntu学习感悟
- 【云栖大会】三个物联网案例,看懂阿里巴巴为何布局最难的物联网道路
- 学3D建模要注意什么问题?入行好几年,踩过的坑后的经验
- 戏子推荐伤感个性日志:其实我很脆弱
- Vue实现vr看房效果
- MATLAB实现控制系统的根轨迹分析
- 4g+uim卡是什么卡_uim卡是什么 sim卡槽能不能用uim卡