文件加載時的事件

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

如果在你的script.js有一個函數，例如： function a()那么你可以抓住它，如果可用的話

var checkScript = function(){
   if (typeof a  === "function"){
      //fire event
   }else{
      setTimeout(checkScript, 1000);
   }
}
checkScript ();

Answer 2

腳本元素支持load事件，因此您應該在將腳本元素插入DOM之前在腳本元素上設置偵聽器，例如

  s.src = urls[i];

  s.onload = asyncLoad; // add load listener

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

如果您想知道它是否成功到達，請使用XMLHttpRequest獲取內容，然后將其分配給script元素的text屬性。 這樣您就可以知道腳本是否已被檢索，在發生故障時設置超時並采取糾正措施，同時不鎖定瀏覽器。