Question

这是检测当前引擎是否支持异步函数的一种方法：

const supportsAsyncFunctions = (() => {
  try {
    new Function('async () => {}')();
  } catch (error) {
    return false;
  }

  return true;
})();

但有没有办法在不使用eval或Function的情况下执行此操作？

Answer 1

建议的eval方式会对CSP错误产生误报，因为它们不会被处理。如果这是一个问题，可以按this answer。

中所示处理CSP错误

可以这样做，但解决方案根本不是很好，涉及外部脚本。脚本可以设置标志，或者可以设置全局错误处理程序以在加载脚本时监视语法错误。

如果脚本导致语法错误，它仍然被视为已加载，因此网络问题不会导致误报：

异步-detection.js

window.isAsyncAvailable = true;
async () => {};

main.js

new Promise(function (resolve, reject) {
  var script = document.createElement('script');
  document.body.appendChild(script);
  script.onload = resolve.bind(null, true);
  script.onerror = reject;
  script.async = true;
  script.src = 'async-detection.js';
})
.then(function () {
  console.log(window.isAsyncAvailable);
})
.catch(/* generic script loading error */);

此方法可用于检测网站上使用的语法功能，这些功能无法填充或通常被try..catch捕获。特别有用的是可靠地触发您的浏览器处于最后一段 nag屏幕。

Answer 2

扩展@Estus Flask的答案中的绝妙想法...

UnsupportedOperationException

这将在内存中创建DIV，然后在其中添加一个使用Base64 Encoded Pixel的IMG，同时还使用leveraging this trick运行array()，这样您就不需要定义外部脚本也没有外部图像要加载。也可以将其简化为单线：

var div = document.createElement("div");
div.innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" onload="async () => {}; window.isAsyncAvailable = true;">'

但是，这与some CSP configurations不符。如果这与您有关，那么@Estus Flask的外部脚本是您的首选。

如何在没有eval的情况下检测异步功能支持？

2 个答案: