javascript 兼容总结
2021-07-13 10:06
阅读：521
1 大多数兼容性问题可通过 if(){…}else{…} 来解决 2 this 的指向问题 3 1）构造函数中的 this 指 “.”前的对象 4 2）new 出来的对象，this 指当前对象 5 3）回调函数中的 this 指 window 6 4）给当前元素添加事件 this 指当前元素 7 8 JS中出现的兼容性问题的总结 9 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 10 我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时: 11 我们一般通过这两个方法获取行外样式： 12 IE下: currentStyle 13 Chrome,FF下: getComputedStyle(oDiv,false) 14 兼容两个浏览器的写法: 15 if(oDiv.currentStyle){ 16 alert(oDiv.currentStyle.width); 17 }else{ 18 alert(getComputedStyle(oDiv,false).width); 19 } 20 *注:在解决很多兼容性写法时,都是用if..else.. 21 22 封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7) 23 funtion getStyle(obj,name){ 24 if(obj.currentStyle){ 25 //IE 26 return obj.currentStyle[name]; 27 }else{ 28 //Chrom,FF 29 return getComputedStyle(obj,false)[name]; 30 } 31 } 32 调用：getStyle(oDiv,‘width‘); 33 34 2.关于用“索引”获取字符串每一项出现的兼容性问题: 35 对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值, 36 var str="abcde"; 37 aletr(str[1]); 38 但是低版本的浏览器IE6,7不兼容 39 兼容方法:str.charAt(i) //全部浏览器都兼容 40 var str="abcde"; 41 for(var i=0;i){ 42 alert(str.charAt(i)); //放回字符串中的每一项 43 } 44 45 3.关于DOM中 childNodes 获取子节点出现的兼容性问题 46 childNodes:获取子节点, 47 --IE6-8:获取的是元素节点,正常 48 --高版本浏览器:但是会包含文本节点和元素节点(不正常) 49 解决方法: 使用nodeType:节点的类型，并作出判断 50 --nodeType=3-->文本节点 51 --nodeTyPE=1-->元素节点 52 例: 获取ul里所有的子节点，让所有的子节点背景色变成红色 53 获取元素子节点兼容的方法: 54 var oUl=document.getElementById(‘ul‘); 55 for(var i=0;i ){ 56 if(oUl.childNodes[i].nodeType==1){ 57 oUl.childNodes[i].style.background=‘red‘; 58 } 59 } 60 注：上面childNodes为我们带来的困扰完全可以有children属性来代替。 61 children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器， 62 比上面的好用所以我们一般获取子节点时,最好用children属性。 63 var oUl=document.getElementById(‘ul‘); 64 oUl.children.style.background="red"; 65 66 4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时产生的问题 67 --IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点 68 (高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点) 69 --高版本浏览器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling 70 (低版本浏览器IE6-8不兼容) 71 --兼容写法: 找到ul的第一个元素节点,并将其背景色变成红色 72 var oUl=document.getElementById(‘ul‘); 73 if(oUl.firstElementChild){ 74 //高版本浏览器 75 oUl.firstElementChild.style.background=‘red‘; 76 }else{ 77 //IE6-8 78 oUl.firstChild.style.background=‘red‘; 79 } 80 81 5.关于使用 event对象，出现的兼容性问题 82 如: 获取鼠标位置 83 IE/Chrom: event.clientX;event.clientY 84 FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY 85 获取event对象兼容性写法: var oEvent==ev||event; 86 document.oncilck=function(ev){ 87 var oEvent==ev||event; 88 if(oEvent){ 89 alert(oEvent.clientX); 90 } 91 } 92 93 6.关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题 94 事件绑定:(不兼容需要两个结合做兼容if..else..) 95 IE8以下用: attachEvent(‘事件名‘,fn); 96 FF,Chrome,IE9-10用: attachEventLister(‘事件名‘,fn,false); 97 多事件绑定封装成一个兼容函数: 98 function myAddEvent(obj,ev,fn){ 99 if(obj.attachEvent){ 100 //IE8以下 101 obj.attachEvent(‘on‘+ev,fn); 102 }else{ 103 //FF,Chrome,IE9-10 104 obj.attachEventLister(ev,fn,false); 105 } 106 } 107 myAddEvent(oBtn,‘click‘,function(){ 108 alert(a); 109 }); 110 myAddEvent(oBtn,‘click‘,function(){ 111 alert(b); 112 }); 113 114 7.关于获取滚动条距离而出现的问题 115 当我们获取滚动条滚动距离时: 116 IE,Chrome: document.body.scrollTop 117 FF: document.documentElement.scrollTop 118 兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop /*****************************************补充内容****************************************/
1、innerText和innerContent
1)innerText和innerContent的作用相同
2）innerText IE8之前的浏览器支持
3）innerContent 老版本的Firefox支持
4）新版本的浏览器两种方式都支持
// 老版本浏览器兼容 innerText 和 innerContent
if(ele.textContent){
return ele.textContent;
}else{
return ele.innerText;
}
2、获取兄弟节点/元素的兼容性问题
1）兄弟节点，所有浏览器都支持
①nextSibling 下一个兄弟节点，可能是非元素节点；会获取到文本节点
②previousSibling 上一个兄弟节点，可能是非元素节点；会获取到文本节点
2）兄弟元素，IE8以前不支持
①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白
②nextElementSibling 获取下一个紧邻的兄弟元素，会忽略空白
//兼容浏览器// 获取下一个紧邻的兄弟元素function getNextElement(element) {
// 能力检测
if(element.nextElementSibling) {
return element.nextElementSibling;
} else {
var node = element.nextSibling;
while(node && node.nodeType !== 1) {
node = node.nextibling;
}
return node;
}
}
/*** 返回上一个元素* @param element* @returns {*}*/function getPreviousElement(element) {
if(element.previousElementSibling) {
return element.previousElementSibling;
}else {
var el = element.previousSibling;
while(el && el.nodeType !== 1) {
el = el.previousSibling;
}
return el;
}
}/*** 返回第一个元素firstElementChild的浏览器兼容* @param parent* @returns {*}*/function getFirstElement(parent) {
if(parent.firstElementChild) {
return parent.firstElementChild;
}else {
var el = parent.firstChild;
while(el && el.nodeType !== 1) {
el = el.nextSibling;
}
return el;
}
}/*** 返回最后一个元素* @param parent* @returns {*}*/function getLastElement(parent) {
if(parent.lastElementChild) {
return parent.lastElementChild;
}else {
var el = parent.lastChild;
while(el && el.nodeType !== 1) {
el = el.previousSibling;
}
return el;
}
}/***获取当前元素的所有兄弟元素* @param element* @returns {Array}*/function sibling(element) {
if(!element) return ;
var elements = [ ];
var el = element.previousSibling;
while(el) {
if(el.nodeType === 1) {
elements.push(el);
}
el = el.previousSibling;
}
el = element.previousSibling;
while(el ) {
if(el.nodeType === 1) {
elements.push(el);
}
el = el.nextSibling;
}
return elements;
}3、array.filter();
// 使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组
// 兼容旧环境if (!Array.prototype.filter)
{ Array.prototype.filter = function(fun /*, thisArg */)
{
"use strict";
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== "function")
throw new TypeError();
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i
{
if (i in t)
{
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method‘s new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t))
res.push(val);
}
}
return res;
};
}4、array.forEach();
// 遍历数组
//兼容旧环境// Production steps of ECMA-262, Edition 5, 15.4.4.18// Reference: http://es5.github.io/#x15.4.4.18if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError(‘ this is null or not defined‘);
}
// 1. Let O be the result of calling toObject() passing the
// |this| value as the argument.
var O = Object(this);
// 2. Let lenValue be the result of calling the Get() internal
// method of O with the argument "length".
// 3. Let len be toUint32(lenValue).
var len = O.length >>> 0;
// 4. If isCallable(callback) is false, throw a TypeError
exception. // See: http://es5.github.com/#x9.11
if (typeof callback !== "function") {
throw new TypeError(callback + ‘ is not a function‘);
}
// 5. If thisArg was supplied, let T be thisArg; else let
// T be undefined.
if (arguments.length > 1) {
T = thisArg;
}
// 6. Let k be 0
k = 0;
// 7. Repeat, while k
while (k
var kValue;
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty
// internal method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if (k in O) {
// i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue = O[k];
// ii. Call the Call internal method of callback with T as
// the this value and argument list containing kValue, k, and O.
callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined
};
}5、注册事件
.addEventListener = function (type,listener,useCapture ) { };
//第一个参数 事件名称
//第二个参数 事件处理函数（监听者）
//第三个参数 true捕获 false冒泡
//IE9以后才支持
// 兼容旧环境
var EventTools = {
addEventListener: function (element, eventName, listener) {
//能力检测
if(element.addEventListener) {
element.addEventListener(eventName, listener,false);
}else if(element.attachEvent) {
element.attachEvent("on" + eventName, listener);
}else{
element["on" + eventName] = listener;
}
},
// 想要移除事件，不能使用匿名函数 removeEventListener: function (element, eventName, listener) {
if(element.removeEventListener) {
element.removeEventListener(eventName,listener,false);
}else if(element.detachEvent) { //IE8以前注册.attachEvent和移除事件.detachEvent
element.detachEvent("on"+eventName,listener);
}else{
element["on" + eventName] = null;
}
}
};
6、事件对象
1)事件参数e，就是事件对象，标准的获取方式
btn.onclick = function(e) { }
2)e.eventPhase 事件阶段，IE8以前不支持
3)e.target 始终是触发事件的对象（点击的按钮）
i）IE8以前 srcElement
ii）浏览器兼容
var target = e.target || window.event.srcElement;
// 获取事件对象 兼容浏览器 getEvent: function(e) {
return e || window.event; // e事件对象 标准的获取方式； window.event IE8以前获取事件对象的方式
}
// 兼容target getTarget: function(e) {
return e.target || e.srcElement;
}
7、获取鼠标在页面上的位置
①在可视区域中的位置： e.clientX e.clientY
②在文档中的位置：
i） e.pageX e.pageY
ii）浏览器兼容
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var pageY = e.clientY + scrollTop;
8、获取页面滚动的距离
// 兼容浏览器var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;
9、取消文本的选择
// 兼容浏览器window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
上一篇：python学习记录（三）
下一篇：最近整理出了有关大数据，微服务，分布式，Java，Python，Web前端，产品运营，交互等1.7G的学习资料，有视频教程，源码，课件，工具，面试题等等。这里将珍藏多年的资源免费分享给各位小伙伴们
评论
亲，登录后才可以留言！