浏览器内核及对应兼容性的处理问题

2018-06-24 00:52:39来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 众所周知,目前市场上最火的五大浏览器是:google chrome、firefox(FF)、Internet Explorer(IE)、safari、opera。

  

 他们相对应的内核是什么呢?

  谷歌浏览器:Google Chrome,谷歌浏览器之前一直使用苹果的webkit内核,但是现在它与苹果内核分道扬镳,自己开创了新的blink内核,这个内核也在被欧鹏(opera浏览器)共同采用和开发;

  火狐浏览器:Mozilla Firefox ,内核是Gecko;

  opera浏览器:内核是blink;

  Safari浏览器:使用的是苹果公司自己的内核webkit;

  IE浏览器:微软出品的浏览器,IE4以上版本都是Trident内核。由于垄断性,IE在很长一段时间内没有更新,导致两个后果:一是IE与W3C标准脱节,二是Trident内核大量的bug问题没得到及时解决。所以这就给了其他浏览器机会,比如firefox等。也正是这些原因,使Web前端开发人员大费周折,特别是IE6正处在新旧交替的关键地方(已经逐渐被舍弃)。

 

  当然除了这五大浏览器之外,市场上还有很多,例如:

  搜狗浏览器:兼容模式(IE:Trident)和高速模式(webkit);

  遨游浏览器:兼容模式(IE:Trident)和高速模式(webkit);

  QQ浏览器:普通模式(IE:Trident)和极速模式(webkit);

  360极速浏览器:基于谷歌(Chromium)和IE内核;

  360安全浏览器:IE内核。

 

 当然,既然浏览器的内核不同,那么浏览器在解析代码的时候就会有可能不一样,因为他们所支持的方法有不同之处。

 在pc端,通用的方法有三种:分别是能力检测、代理检测和怪癖检测。

  1.能力检测(常用):通过获取标签的API,检测他是否支持这个API,如果支持,那么就用,否则就换另一种API来达到效果,例如原生js中常用的innerText方法:

 1 // 书写innerText的兼容性代码:
 2 // 获取标签的innerText(兼容所有浏览器)
 3 function getInnerText(element) {
 4     if (typeof element.innerText === "string") {
 5         return element.innerText;
 6     } else {
 7         return element.textContent;
 8     }
 9 }
10 
11 //设置标签的innerText(兼容所有浏览器)
12 function setInnerText(element, value) {
13     //能力检测
14     if (typeof element.innerText === "string") {
15         element.innerText = value;
16     } else {
17         element.textContent = value;
18     }
19 }

  2.代理检测:通过在浏览器中的控制台(console.log)中输入navigator.userAgent,来获得浏览器的相关信息。

  3.怪癖检测:由于有些浏览器有自己独特的特征,通过检测浏览器有无对应的特征,来分辨浏览器。

 

这些方法仅仅是本人在开发中遇到的方法,希望在开发过程中能与大家共同分享,可能还有其它方法,如果大牛们还有其他方法,还请留言,多多指教!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:javascript中的undefined与null的区别

下一篇:JavaScript学习笔记(九)——方法