浅析JavaScript中浏览器的兼容问题


Posted in Javascript onApril 19, 2016

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法。下面做了一些简短的介绍。

1、innerText 和 innerContent
1)innerText 和 innerContent 的作用相同
2)innerText IE8之前的浏览器支持
3)innerContent 老版本的Firefox支持
4)新版本的浏览器两种方式都支持

1 // 老版本浏览器兼容 innerText 和 innerContent
2 if (element.textContent) {
3    return element.textContent ;
4  } else {
5    return element.innerText;
6  }

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 < len; 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.18
if (!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 < len
  while (k < len) {
   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();

【总结】这里只是做了一部分的小结,实际开发中也还会遇到各种浏览器兼容的问题。不同浏览器在PC端和手机端也会遇到不同适配问题,这些就有待童鞋们一起去发掘总结啦~~希望能帮到大家,不足的地方请多指教啦~~~

以上这篇浅析JavaScript中浏览器的兼容问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Vue从TodoList中学父子组件通信
Feb 05 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 #Javascript
深入浅析JavaScript中的constructor
Apr 19 #Javascript
js点击返回跳转到指定页面实现过程
Aug 20 #Javascript
javascript html5摇一摇功能的实现
Apr 19 #Javascript
一些实用性较高的js方法
Apr 19 #Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 #Javascript
JavaScript中创建对象的模式汇总
Apr 19 #Javascript
You might like
PHP 事务处理数据实现代码
2010/05/13 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
python实现机器学习之多元线性回归
2018/09/06 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
基于python实现把图片转换成素描
2019/11/13 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
广州迈达威.net面试题目
2012/03/10 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
大学生实习证明范本
2014/01/15 职场文书
创业计划书撰写原则
2014/01/25 职场文书
植树节活动总结
2014/04/30 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014个人年度工作总结
2014/12/15 职场文书
行政二审代理词
2015/05/25 职场文书
公司职员入党自传书
2015/06/26 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js