javascript - 检测异步脚本的 onload/onerror

Question

给定类似于以下代码的内容，是否有任何方法可以确定(从异步回调中)特定脚本是否已完成加载。

<script async id="js" src="//example.com/my-script.js"></script>
<script>
  setTimeout(function() {
    var js = document.getElementById('js');
    js.onload = function() {
      console.log('loaded!');
    }
    js.onerror = function() {
      console.log('error!');
    }
  }, 0);
</script>

在上面的代码中，onload/onerror缓存脚本时不会触发回调，但会在未缓存时触发。

谁能想出一种方法来确定在这种情况下特定脚本是否已完成加载(或加载时发生错误)？基本上，我正在寻找一种万无一失的方法来添加加载和/或错误回调，即使在加载(或错误)已经发生的情况下也是如此。

注意:我知道有很多方法可以在 JavaScript 中完全做到这一点。出于这个问题的目的，假设我无法更改脚本标签、它出现在源代码中的位置或其内容。我想知道这是否可能给定现有的 <script async>指向第三方资源的标记。

谢谢!

Answer 1

也许您可以尝试使用递归函数和 sessionStorage 或 localStorage:

在您加载的脚本中，在最后声明: localStorage.myScriptIsLoaded=true

然后使用递归函数:

function recursive(){
   if(!localStorage.myScriptIsLoaded){
      setTimeout(recursive(),10);
   }
   else{
   //do what you want to do
   }
} 
recursive();