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


     众所周知,目前市场上最火的五大浏览器是: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.怪癖检测:由于有些浏览器有自己独特的特征,通过检测浏览器有无对应的特征,来分辨浏览器。

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

  • 相关阅读:
    #pragam预处理分析
    #error和line
    Appium+Robotframework实现Android应用的自动化测试-4:AppiumLibrary介绍和安装
    Appium+Robotframework实现Android应用的自动化测试-3:一个必不可少的工具介绍
    Appium+Robotframework实现Android应用的自动化测试-2:Windows中启动Appium和模拟器
    python程序打包成.exe----pyinstaller工具
    python: extend (扩展) 与 append (追加) 的差别
    2小时入门Robot Framework
    sizeof进行结构体大小的判断
    Python 包管理工具解惑
  • 原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/7884803.html
Copyright © 2020-2023  润新知