javascript 如何在javascript中检测浏览器渲染引擎？

Question

提问by dramasea

I read a book calls 'Professional Javascript For Web Developers 2nd edition' and it state that this code can detect browser rendering engine:

我读了一本名为“Professional Javascript For Web Developers 2nd edition”的书，它指出这段代码可以检测浏览器渲染引擎：

    <script type="text/javascript">
  var client = function(){
     var engine = {
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        ver: null
     };

     return {
        engine : engine  
     };

  }();

  if(client.engine.ie){
      alert("This is internet explorer");
  }else if(client.engine.gecko > 1.5){
      if(client.engine.ver == "1.8.1"){
          alert("This is gecko rendering browser");
      }
  }else if(client.engine.webkit){
        alert("This is web kit");
  }else if(client.engine.khtml){
       alert("This is khtml");
  }else{
       alert("none of the above");
  }
</script>

but it seems like doesn't work, so how this code work to detect browser rendering engine?Thanks

但它似乎不起作用，那么这段代码如何工作以检测浏览器渲染引擎？谢谢

Answer 1

回答by mplungjan

If you read the rest of the chapterand download the source

如果您阅读了本章的其余部分并下载了源代码

then you can look at client.js:

那么你可以看看client.js：

It still works in IE10 on win7 and Chrome 67 on Win10

它仍然适用于 IE10 上的 Win7 和 Chrome 67 上的 Win10

It needs a little change to handle IE11 (Trident/) and Edge(Edge/) - see later

处理 IE11 (Trident/) 和 Edge(Edge/) 需要稍作改动 - 稍后见

var client = function() {

  //rendering engines
  var engine = {
    ie: 0,
    gecko: 0,
    webkit: 0,
    khtml: 0,
    opera: 0,

    //complete version
    ver: null
  };

  //browsers
  var browser = {

    //browsers
    ie: 0,
    firefox: 0,
    safari: 0,
    konq: 0,
    opera: 0,
    chrome: 0,
    safari: 0,

    //specific version
    ver: null
  };


  //platform/device/OS
  var system = {
    win: false,
    mac: false,
    x11: false,

    //mobile devices
    iphone: false,
    ipod: false,
    nokiaN: false,
    winMobile: false,
    macMobile: false,

    //game systems
    wii: false,
    ps: false
  };

  //detect rendering engines/browsers
  var ua = navigator.userAgent;
  if (window.opera) {
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
  } else if (/AppleWebKit\/(\S+)/.test(ua)) {
    engine.ver = RegExp[""];
    engine.webkit = parseFloat(engine.ver);

    //figure out if it's Chrome or Safari
    if (/Chrome\/(\S+)/.test(ua)) {
      browser.ver = RegExp[""];
      browser.chrome = parseFloat(browser.ver);
    } else if (/Version\/(\S+)/.test(ua)) {
      browser.ver = RegExp[""];
      browser.safari = parseFloat(browser.ver);
    } else {
      //approximate version
      var safariVersion = 1;
      if (engine.webkit < 100) {
        safariVersion = 1;
      } else if (engine.webkit < 312) {
        safariVersion = 1.2;
      } else if (engine.webkit < 412) {
        safariVersion = 1.3;
      } else {
        safariVersion = 2;
      }

      browser.safari = browser.ver = safariVersion;
    }
  } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
    engine.ver = browser.ver = RegExp[""];
    engine.khtml = browser.konq = parseFloat(engine.ver);
  } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
    engine.ver = RegExp[""];
    engine.gecko = parseFloat(engine.ver);

    //determine if it's Firefox
    if (/Firefox\/(\S+)/.test(ua)) {
      browser.ver = RegExp[""];
      browser.firefox = parseFloat(browser.ver);
    }
  } else if (/MSIE ([^;]+)/.test(ua)) { // add Trident/ to test IE11, Edge for Edge
    engine.ver = browser.ver = RegExp[""];
    engine.ie = browser.ie = parseFloat(engine.ver);
  }

  //detect browsers
  browser.ie = engine.ie;
  browser.opera = engine.opera;


  //detect platform
  var p = navigator.platform;
  system.win = p.indexOf("Win") == 0;
  system.mac = p.indexOf("Mac") == 0;
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

  //detect windows operating systems
  if (system.win) {
    if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
      if (RegExp[""] == "NT") {
        switch (RegExp[""]) {
          case "5.0":
            system.win = "2000";
            break;
          case "5.1":
            system.win = "XP";
            break;
          case "6.0":
            system.win = "Vista";
            break;
          default:
            system.win = "NT";
            break;
        }
      } else if (RegExp[""] == "9x") {
        system.win = "ME";
      } else {
        system.win = RegExp[""];
      }
    }
  }

  //mobile devices
  system.iphone = ua.indexOf("iPhone") > -1;
  system.ipod = ua.indexOf("iPod") > -1;
  system.nokiaN = ua.indexOf("NokiaN") > -1;
  system.winMobile = (system.win == "CE");
  system.macMobile = (system.iphone || system.ipod);

  //gaming systems
  system.wii = ua.indexOf("Wii") > -1;
  system.ps = /playstation/i.test(ua);

  //return it
  return {
    engine: engine,
    browser: browser,
    system: system
  };

}();

console.log(client.browser,client.engine,client.system)

It needs a little change to handle IE11 (Trident/) and Edge(Edge/)

处理 IE11 (Trident/) 和 Edge(Edge/) 需要稍作改动

var client = function() {

  //rendering engines
  var engine = {
    ie: 0,
    edge: 0,
    gecko: 0,
    webkit: 0,
    khtml: 0,
    opera: 0,

    //complete version
    ver: null
  };

  //browsers
  var browser = {

    //browsers
    ie: 0,
    edge: 0,
    firefox: 0,
    safari: 0,
    konq: 0,
    opera: 0,
    chrome: 0,
    safari: 0,

    //specific version
    ver: null
  };


  //platform/device/OS
  var system = {
    win: false,
    mac: false,
    x11: false,

    //mobile devices
    iphone: false,
    ipod: false,
    nokiaN: false,
    winMobile: false,
    macMobile: false,

    //game systems
    wii: false,
    ps: false
  };

  //detect rendering engines/browsers
  var ua = navigator.userAgent;
  if (window.opera) {
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
  }  
  else if (/Edge\/([^;]+)/.test(ua)) { // IE11
    engine.ver = browser.ver = RegExp[""];
    engine.edge = browser.edge = parseFloat(engine.ver);
  } else if (/AppleWebKit\/(\S+)/.test(ua)) {
    engine.ver = RegExp[""];
    engine.webkit = parseFloat(engine.ver);

    //figure out if it's Chrome or Safari
    if (/Chrome\/(\S+)/.test(ua)) {
      browser.ver = RegExp[""];
      browser.chrome = parseFloat(browser.ver);
    } else if (/Version\/(\S+)/.test(ua)) {
      browser.ver = RegExp[""];
      browser.safari = parseFloat(browser.ver);
    } else {
      //approximate version
      var safariVersion = 1;
      if (engine.webkit < 100) {
        safariVersion = 1;
      } else if (engine.webkit < 312) {
        safariVersion = 1.2;
      } else if (engine.webkit < 412) {
        safariVersion = 1.3;
      } else {
        safariVersion = 2;
      }

      browser.safari = browser.ver = safariVersion;
    }
  } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
    engine.ver = browser.ver = RegExp[""];
    engine.khtml = browser.konq = parseFloat(engine.ver);
  } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
    engine.ver = RegExp[""];
    engine.gecko = parseFloat(engine.ver);

    //determine if it's Firefox
    if (/Firefox\/(\S+)/.test(ua)) {
      browser.ver = RegExp[""];
      browser.firefox = parseFloat(browser.ver);
    }
  } else if (/MSIE ([^;]+)/.test(ua)) { // IE <= 10
    engine.ver = browser.ver = RegExp[""];
    engine.ie = browser.ie = parseFloat(engine.ver);
  } else if (/Trident\/([^;]+)/.test(ua)) { // IE11
    engine.ver = RegExp[""];
    browser.ver = parseFloat(ua.split("rv:")[1]);
    engine.ie = parseFloat(browser.ver);
  }

  //detect browsers
  browser.ie = engine.ie;
  browser.opera = engine.opera;


  //detect platform
  var p = navigator.platform;
  system.win = p.indexOf("Win") == 0;
  system.mac = p.indexOf("Mac") == 0;
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

  //detect windows operating systems
  if (system.win) {
    if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
      if (RegExp[""] == "NT") {
        switch (RegExp[""]) {
          case "5.0":
            system.win = "2000";
            break;
          case "5.1":
            system.win = "XP";
            break;
          case "6.0":
            system.win = "Vista";
            break;
          default:
            system.win = "NT";
            break;
        }
      } else if (RegExp[""] == "9x") {
        system.win = "ME";
      } else {
        system.win = RegExp[""];
      }
    }
  }

  //mobile devices
  system.iphone = ua.indexOf("iPhone") > -1;
  system.ipod = ua.indexOf("iPod") > -1;
  system.nokiaN = ua.indexOf("NokiaN") > -1;
  system.winMobile = (system.win == "CE");
  system.macMobile = (system.iphone || system.ipod);

  //gaming systems
  system.wii = ua.indexOf("Wii") > -1;
  system.ps = /playstation/i.test(ua);

  //return it
  return {
    engine: engine,
    browser: browser,
    system: system
  };

}();

console.log(JSON.stringify({ browser:client.browser,engine:client.engine,system:client.system},null, 2));

Answer 2

回答by tdammers

The script obviously doesn't work - it just sets a bunch of variables to zero or null and then checks if they're zero or null. My guess would be that this is not the whole script, and that the crucial part is missing.

该脚本显然不起作用 - 它只是将一堆变量设置为零或空，然后检查它们是零还是空。我的猜测是这不是整个脚本，并且缺少关键部分。

What one would normally do is read the UserAgent string (I'm too lazy to google how exactly you do that) and throw some regular expressions at it to detect known patterns. This kind of user agent sniffing has a bunch of downsides though:

人们通常会做的是读取 UserAgent 字符串（我懒得用谷歌搜索你到底是怎么做的）并在它上面抛出一些正则表达式来检测已知模式。不过，这种用户代理嗅探有很多缺点：

It's not forward compatible. You don't know which UA strings future browsers are going to use, so most likely, newer browsers will fail your test and receive the most stripped-down version, even though they could easily handle the full-eye-candy-blow-your-mind one.
The UA string isn't reliable. Just because so many websites make the mistake of sniffing, and then not getting updated regularly, users set different UA strings, purposefully reporting a "wrong" render engine. And then they forget to switch it back, causing all sorts of weird behaviour.
Just because someone has a certain render engine doesn't mean you can rely on all features being there. Browsers are highly configurable, and people use all sorts of extensions, blocking things selectively or completely.

它不向前兼容。您不知道未来的浏览器将使用哪些 UA 字符串，因此很可能较新的浏览器将无法通过您的测试并收到最精简的版本，即使它们可以轻松处理令人眼花缭乱的浏览器- 心一。
UA 字符串不可靠。正因为如此多的网站犯了嗅探的错误，然后没有定期更新，用户设置了不同的 UA 字符串，故意报告“错误”的渲染引擎。然后他们忘记将其切换回来，导致各种奇怪的行为。
仅仅因为某人拥有特定的渲染引擎并不意味着您可以依赖那里的所有功能。浏览器是高度可配置的，人们使用各种扩展，有选择地或完全地阻止事物。

Long story short, instead of sniffing the UA string and assuming things are what you think they are, just test features individually and directly.

长话短说，不要嗅探 UA 字符串并假设事物与您认为的一样，只需单独直接测试功能即可。

Answer 3

回答by Kailas

This is just an alternative. If you are really worried about the rendering issue, you can always playground with the screen width, as far as design is concerned.

这只是一个替代方案。如果您真的担心渲染问题，就设计而言，您可以随时调整屏幕宽度。

For Single Page applications, you just need to screen the screen to the correct sizes depending upon the screen width and your requirement... :)

对于单页应用程序，您只需要根据屏幕宽度和您的要求将屏幕筛选到正确的尺寸... :)

We made use of:

我们利用了：

if(screen.width > 360 && screen.width < 720){
    document.write ('<meta name="viewport" content="initial-scale=.25, maximum-scale=.25, user-scalable=no">');
 }

For ios, iphone, ipad it's quite easy as you have to play with just fixed sizes or the standard sizes.

对于 ios、iphone、ipad，这很容易，因为您只需使用固定尺寸或标准尺寸即可。

For Android, really frustates you, what we found good was to move ahead with the ldpi, mdpi, hdpi, xhdi and max xxhdpi (for tabs) Pixel ranges.

对于 Android，真的让您感到沮丧，我们发现使用 ldpi、mdpi、hdpi、xhdi 和 max xxhdpi（用于选项卡）像素范围是好的。

javascript 如何在javascript中检测浏览器渲染引擎？

提问by dramasea

回答by mplungjan

回答by tdammers

回答by Kailas

相关推荐

最近更新

标签

javascript 如何在javascript中检测浏览器渲染引擎？

提问by dramasea

回答by mplungjan

回答by tdammers

回答by Kailas

相关推荐

Javascript 拼写检查方法

javascript 从另一个 iframe 更改 iframe 源

Javascript 包关键字有什么用？

javascript - click() 在 chrome 中不起作用

相关推荐

最近更新

标签