文章目录
为什么js需要兼容不同浏览器
JavaScript需要解决不同浏览器的兼容性问题,因为不同浏览器在实现JavaScript标准时存在差异,这导致同一段JavaScript代码在不同浏览器上可能表现出不同的行为或错误。这些差异主要包括以下几个方面:
JavaScript标准的不一致性:虽然JavaScript有一套标准(ECMAScript),但不同浏览器对这些标准的实现程度和方式各有不同。一些浏览器可能支持最新的标准,而另一些浏览器可能仍在支持旧版本的标准,这导致了不一致性。
浏览器特有的扩展和API:一些浏览器引入了自己的扩展和非标准API,以提供额外的功能。这些扩展在不同浏览器之间不兼容,如果代码依赖于这些特定的扩展,将无法在其他浏览器上正常运行。
ECMAScript版本的不同:不同浏览器实现ECMAScript标准的版本不同,可能在不同的ECMAScript版本上执行JavaScript代码。某些功能可能只在较新的ECMAScript版本中可用,而较旧的浏览器可能不支持这些功能。
获取行内样式
function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
}
}
获取事件对象的兼容方式
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
事件冒泡的兼容方法
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
阻止浏览器默认行为的兼容方法
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
监听事件的设置和移除的兼容方式
// obj为dom对象 inci为事件名称 比如click back为回调函数
// attachEvent 是老版本浏览器使用的添加事件的方法,现在统一使用addEventListener
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
// obj为dom对象 inci为事件名称 比如click back为回调函数
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
键盘事件的key值
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
时间格式
尽可能采用 YYYY/MM/DD HH:mm:ss
因为safari浏览器只支持YYYY/MM/DD HH:mm:ss这种格式,不支持YYYY-MM-DD HH:mm:ss
"2016-06-10 12:00:00".split('-').join('/')
获取滚动条高度
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
innerText的问题
问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
解决方法:在非IE浏览器中使用textContent代替innerText。
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
尽量不使用setAttribute()
用setAttribute设置style和onclick这些属性,在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
const dom = document.getElementById('element');
dom.style.color = "#00f";
设置类名
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
input.type属性问题
在ie浏览器下input.type是只读属性,不可以修改,如果要修改,最后移除掉原先的input元素,重新添加一个新的input元素
对象宽高赋值问题
问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法:统一使用 obj.style.height = imgObj.height + ‘px’;
通过id获取dom
问题说明:IE下,可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象;Firefox下,只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
解决方法:统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
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;
获取dom父元素
在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
访问、设置剪切板中的数据
要访问剪切板中的数据,可以使用clipboardData对象:IE中,这个对象是window对象的属性;而在Firefox,Chrome,Safar中,这个对象是event对象的属性。
const setClipboardText = function (event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
};
const getClipboardText = function (event) {
const clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
};