如何找到浏览器的Javascript引擎版本以及对ECMAScript 6的支持?
我navigator.appVersion
只是想知道浏览器的版本,而不是引擎的版本。
建议您使用功能检测,而不要使用启发式方法检测浏览器的引擎。为此,您可以简单地在try {..} catch (e) {...}
语句中包装一些代码,或使用一些if (...)
语句。
例如:
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的支持,您将无法像我上面所说的那样工作,因为ES6功能的相关范围是基于新的语法和专用词,并且会抛出一SyntaxError
,如果用在ES5,这意味着编写同时包含ES5和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功能。使用两种不同的脚本,只有在支持ES6的情况下,才能导入ES6,而不会引发该脚本SyntaxErrors
。
现在让我们做一个更相关的示例,假设您想在ES6脚本中使用这些功能:
Symbol
对象class
关键字构建的类(...)=>{...}
)功能注意: 只能使用该功能或其他等效功能(例如)来完成新引入语法(例如箭头功能)的功能检测,因为编写无效语法将在脚本执行之前停止脚本。这也是为什么您不能使用语句来检测类和箭头函数的原因:这些功能与关键字和语法有关,因此包装在块中会很好地工作。eval()
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脚本进行编程时,浏览器和引擎检测并不是最佳实践。我将为您提供有关该主题的一些背景知识,只是不要让我的话成为“随机的个人观点”。
引用MDN文档[ 链接 ]:
考虑使用用户代理字符串检测正在使用哪个浏览器时,第一步是尝试避免使用它。首先尝试确定您为什么要这样做。
[...] 您是否要检查是否存在特定功能?您的站点需要使用某些浏览器尚不支持的特定Web功能,并且您希望将这些用户发送到功能较少的旧站点,但您知道可以使用。这是使用用户代理检测的最糟糕的原因,因为最终所有其他浏览器都会赶上来。您应尽力避免在这种情况下使用用户代理嗅探,而应进行功能检测。
另外,您说的是navigator.appVersion
,但考虑使用另一种方法,因为该方法以及许多其他导航器属性已被弃用,并且并不总是像您认为的那样运行。
因此,再次引用MDN文档[ link ]:
不推荐使用:此功能已从Web标准中删除。尽管某些浏览器可能仍支持它,但是它正在被删除。不要在新旧项目中使用它。使用它的页面或Web应用程序可能随时中断。
注意:不要依赖此属性来返回正确的浏览器版本。在基于Gecko的浏览器(如Firefox)和基于WebKit的浏览器(如Chrome和Safari)中,返回值以“ 5.0”开头,后跟平台信息。在Opera 10及更高版本中,返回的版本也不与实际的浏览器版本匹配。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句