Javascript ES6跨浏览器检测

  • Z时代
  • 2024-01-10
  • 分类：问答

如何找到浏览器的Javascript引擎版本以及对ECMAScript 6的支持？

我navigator.appVersion只是想知道浏览器的版本，而不是引擎的版本。

回答：

回答：

我建议您使用 而不要使用启发式方法检测浏览器的引擎。为此，您可以简单地 。

例如：

function check() {
    if (typeof SpecialObject == "undefined") return false;
    try { specialFunction(); }
    catch (e) { return false; }
    return true;
}
if (check()) {
    // Use SpecialObject and specialFunction
} else {
    // You cannot use them :(
}

为什么功能检测比浏览器/引擎检测更好？

在大多数情况下，有多种原因可以使特征检测成为最佳选择：

  • 您不必依赖浏览器的版本，引擎或具体细节，也不必使用难以实现的，启发式的方法来检测它们。

  • 您不会陷入有关浏览器/引擎规格检测的错误。

  • 您不必担心浏览器特定的功能：例如，WebKit浏览器的规格与其他浏览器不同。

  • 您可以确定，一旦检测到功能，便可以使用它。

这些是IMHO使特征检测成为最佳方法的主要原因。

回答：

使用 ，一种不确定的工作方式是一种聪明的工作方式，它不确定您可以/不能使用哪些功能，其中包括 在

（甚至从零开始创建这些方法）的情况。不支持您要使用的。

一个 具有后备功能的特征检测的

简单示例可能适用于该window.requestAnimationFrame功能，并非所有浏览器都支持该功能，并且根据您使用的浏览器，它具有几个不同的前缀。在这种情况下，您可以像这样轻松地检测并

回退 ：

requestAnimationFrame = 
   window.requestAnimationFrame       // Standard name
|| window.webkitRequestAnimationFrame // Fallback to webkit- (old versions of Chrome or Safari)
|| window.mozRequestAnimationFrame    // Fallback to moz- (Mozilla Firefox)
|| false;                             // Feature not supported :(
// Same goes for cancelAnimationFrame
cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || false;
if (!requestAnimationFrame) {
    // Not supported? Build it by yourself!
    requestAnimationFrame = function(callback) {
        return setTimeout(callback, 0);
    }
    // No requestAnim. means no cancelAnim. Built that too.
    cancelAnimationFrame = function(id) {
        clearTimeout(id);
    }
}
// Now you can use requestAnimationFrame 
// No matter which browser you're running
var animationID = requestAnimationFrame(myBeautifulFunction);

回答：

现在，要解决一个 ：如果您想检测对ES6的支持，您将无法像我上面所说的那样工作，因为

，这意味着

这是一个演示此问题的示例；以下代码段无效，并且由于包含非法语法，因此在执行前将被阻止。

function check() {
    "use strict";
    try { eval("var foo = (x)=>x+1"); }
    catch (e) { return false; }
    return true;
}
if (check()) {
    var bar = (arg) => { return arg; }
    // THIS LINE will always throw a SyntaxError in ES5
    // even before checking for ES6
    // because it contains illegal syntax.
} else {
    var bar = function(arg) { return arg; }
}

现在，由于您不能同时在同一个脚本中有条件地检查和执行ES6，因此

：一个仅使用ES5，另一个包含ES6功能。使用两种不同的脚本， ， 才可以 ，而不会引发

脚本SyntaxErrors。

ES6检测和条件执行示例

现在让我们做一个更相关的示例，假设您想在ES6脚本中使用这些功能：

  • 新Symbol对象

  • 使用class关键字构建的类

  • 箭头（(...)=>{...}）功能

或其他等效 （例如） （例如箭头功能）的

，因为编写无效语法会在脚本执行之前停止脚本。这也是为什么您不能使用语句来检测类和箭头函数的原因：这些功能与关键字和语法有关，因此包装在块中可以很好地工作。

Function()``if``eval(...)``try {...} catch (e) {...}

因此，进入真正的代码：

HTML标记：

<html>
    <head>
        <script src="es5script.js"></script>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

es5script.js脚本中的代码：

function check() {
    "use strict";
    if (typeof Symbol == "undefined") return false;
    try {
        eval("class Foo {}");
        eval("var bar = (x) => x+1");
    } catch (e) { return false; }
    return true;
}
if (check()) {
    // The engine supports ES6 features you want to use
    var s = document.createElement('script');
    s.src = "es6script.js";
    document.head.appendChild(s);
} else {
    // The engine doesn't support those ES6 features
    // Use the boring ES5 :(
}

您的代码es6script.js：

// Just for example...
"use strict";
class Car { // yay!
   constructor(speed) {
       this.speed = speed;
   }
}
var foo = Symbol('foo'); // wohoo!
var bar = new Car(320);  // blaze it!
var baz = (name) => { alert('Hello ' + name + '!'); }; // so cool!

浏览器/引擎检测

就像我在上面说的那样，在对某些JavaScript脚本进行编程时，浏览器和引擎检测并不是最佳实践。我将为您提供有关此主题的一些背景知识，只是不要让我的话成为“随机的个人意见”。

当考虑使用用户代理字符串来检测正在使用的浏览器时，第一步是尝试尽可能避免使用它。首先尝试确定您为什么要这样做。

[…]

您的站点需要使用某些浏览器尚不支持的特定Web功能，并且您希望将这些用户发送到功能较少的旧站点，但您知道可以使用。这是使用用户代理检测的最糟糕的原因，因为最终所有其他浏览器都会赶上来。您应尽力避免在这种情况下使用用户代理嗅探，而应

。

另外，您说的是navigator.appVersion，但考虑使用另一种方法，因为该方法以及许多其他导航器属性已被 弃用

，并且并不总是像您认为的那样运行。

：此功能已从Web标准中删除。尽管某些浏览器可能仍支持它，但是它正在被删除。不要在新旧项目中使用它。使用它的页面或Web应用程序可能随时中断。

不要依赖此属性返回正确的浏览器版本。在基于Gecko的浏览器（如Firefox）和基于WebKit的浏览器（如Chrome和Safari）中，返回值以“ 5.0”开头，后跟平台信息。在Opera 10及更高版本中，返回的版本也不与实际的浏览器版本匹配。

以上是 Javascript ES6跨浏览器检测 的全部内容， 来源链接： utcz.com/qa/430973.html

回到顶部