javascript - 文件加载时的事件

Question

下面的代码在页面上运行:

(function() {
  function asyncLoad() {
    var urls = ["https://something.com/script.js"];
    for (var i = 0; i < urls.length; i++) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = urls[i];
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
  }
  window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);
})();
//]]>

我需要一个事件监听器，当该文件在 DOM 中可用时触发。

我需要利用此脚本中的变量。

我需要知道 https://something.com/script.js 何时已加载，如果没有加载，我需要启动备份。如果文件在指定时间内未加载，则可能会发生这种情况。

或者，当 script.js 文件中的变量可用时，我可以使用事件。

Answer 1

脚本元素支持加载事件，因此您应该在将脚本元素插入 DOM 之前设置监听器，例如

  s.src = urls[i];

  s.onload = asyncLoad; // add load listener

  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);     

如果您想知道它是否成功到达，请使用 XMLHttpRequest 获取内容，然后将其分配给脚本元素的 text 属性。这样您就可以知道脚本是否已被检索，在失败时设置超时并采取纠正措施，同时不会锁定浏览器。