如何检查 Javascript 脚本是否已异步加载（Async）或 async 属性是否存在？

Question

我希望您能够告诉我是否存在一种方便的方法来检查脚本（在执行时）是否已异步加载。例如，以下为脚本标签：

<script async type="text/javascript" src="js/async.js"></script>

the script async.js:

if (_condition_to_check_if_this_has_been_loaded_async) { console.log("async: true") }

- Angel Humberto Vargas

---

那个 async.js 是你的脚本还是你无法访问和修改的某个脚本？ - Angelos Chalaris

Angelos，是我的脚本。 - Angel Humberto Vargas

你可以定义一个变量来检查其他脚本，或者你可以按照我的答案建议的一般情况去做。希望对你有所帮助！ :) - Angelos Chalaris

Answer 1

除非你需要兼容IE，否则解决这个问题的正确答案是使用鲜为人知但广泛支持的document.currentScript属性。

该属性返回当前正在执行的脚本的HTMLScriptElement（如果脚本不在标签中/是回调或类似情况，则返回空），从而告诉您它是否具有async/defer属性等其他信息。

MDN的示例甚至引用了这个确切的用例：

if (document.currentScript.async) {
  console.log("Executing asynchronously");
} else {
  console.log("Executing synchronously");
}

- GregRos

Answer 2

你可以尝试测试文档是否已加载：

you can try to test if document source is loaded:

if (document.readyState == "complete" || document.readyState == "loaded") {
     // script was fired async
} else {
    // script was sync
}

如果脚本同步触发，那么在执行时 document.readyState 将不会是 complete 或 loaded，这可能有效。

然而，如果您的脚本很小，则它可能会在整个页面解析之前加载，因此这不是一个理想的解决方案，但我认为值得一提。

- pwolaq

---

我尝试了你的建议，但不幸的是，我正在尝试解决的脚本是通过element.insertAdjacentHTML("beforeend", "<script async src="assets/js/async.js"></script>");添加的。我已经将你的示例添加到脚本中，但似乎并没有像你说的那样起作用。 - Angel Humberto Vargas

Answer 3

jQuery：

您可以使用 jQuery 选择页面中的所有 script 元素，然后检查它们的 src 属性是否与您要查找的属性匹配。下面的示例包含一个检查您的脚本（已加载）和另一个（未加载）以向您展示在两种情况下检查结果：

var len = $('script').filter(function () {
    return ($(this).attr('src') == 'js/async.js');
}).length;
if (len === 0) console.log('async not found');
else console.log('async found');
var len = $('script').filter(function () {
    return ($(this).attr('src') == 'js/foobar.js');
}).length;
if (len === 0) console.log('foobar not found');
else console.log('foobar found');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async type="text/javascript" src="js/async.js"></script>

纯Javascript：

或者，您可以使用纯Javascript，利用getElementsByTagName()和getAttribute()方法来实现相同的功能。以下是示例：

var scripts = document.getElementsByTagName('script');
var found = false;
for(var i = 0; i<scripts.length; i++)
  if(scripts[i].getAttribute('src')=='js/async.js')
    found = true;
if (found) console.log('async found');
else console.log('async not found');

var scripts2 = document.getElementsByTagName('script');
var found = false;
for(var i = 0; i<scripts.length; i++)
  if(scripts2[i].getAttribute('src')=='js/foobar.js')
    found = true;
if (found) console.log('foobar found');
else console.log('foobar not found');

 <script async type="text/javascript" src="js/async.js"></script>

更新：如果您想检查js/async.js脚本是否已加载，并且它是否具有属性async，则可以使用类似的技术。以下是示例：

jQuery：

var len = $('script').filter(function () {
    return ($(this).attr('src') == 'js/async.js' && $(this).attr('async')!== typeof undefined && $(this).attr('async') !== false);
}).length;
if (len === 0) console.log('async not found');
else console.log('async found');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async type="text/javascript" src="js/async.js"></script>

纯Javascript：

var scripts = document.getElementsByTagName('script');
var found = false;
for(var i = 0; i<scripts.length; i++)
  if(
    scripts[i].getAttribute('src')=='js/async.js' 
    && scripts[i].getAttribute('async')!= typeof undefined)
    found = true;
if (found) console.log('async found');
else console.log('async not found');

<script async type="text/javascript" src="js/async.js"></script>

- Angelos Chalaris