加載動態包含的靜態資源？

Question

我有一個頁面，我正在通過Jquery AJAX將html動態注入html。 該html包含腳本/鏈接標記以包含js / css。 現在，我遇到了一個問題，因為initPage()函數在包含initPage()定義的腳本加載之前initPage()運行。

這是我從AJAX調用中接收到的html的示例：

<script type='text/javascript' src='//domain.com/js/fillip.js'></script>
<script type='text/javascript' src='//domain.com/js/fillip2.js'></script>
<link href='//domain.com/css/fillip.css' rel='stylesheet'>

<iframe src='//domain.com/mypage'></iframe>
<script type='text/javascript'>
    $(function(){
        initPage();
    });
</script>

我需要找出一種方法，在腳本加載后通過回調/承諾運行一些javascript。 有時我只需要加載一個腳本，而其他時候，我需要加載多個腳本。 獎勵點包括可以等待CSS文件。

在初始化其余JS代碼之前，如何等待動態js / css文件集加載？

Answer 1

假設所有腳本均在文檔的“ head”部分中定義，則腳本標簽基本上按照在文檔中定義的順序進行處理。

在文檔末尾（您已經有一個對init的函數調用）。

把那個電話放在下面

$(document).ready(function() {
  initPage();
}

另一種方法可以是通過控制順序機制將腳本逐個加載到文檔中，從而加載腳本。

function loadMyJavaScript(jsPath, cb) {
  var loaded = false;

  // create a script element and add it to the head of the document.
  var script = document.createElement('script');

  // Define 3 handlers, which will perform the callback
  script.onload = successHandler;
  script.error  = errorHandler;
  script.onreadystatechange = stateHandler;


  script.src = path;
  document.getElementsByTagName("head")[0].appendChild(jsScript);

  function successHandler() {
      if ( false == loaded ) {
           loaded = true;
           cb(path, "success"); 
      }
  }

  function errorHandler() {
      if ( false == loaded ) {
          loaded = true;
          cb(path, "error");
      }
  }

  function stateHandler() {
      var status;
      if ( false == loaded ) {
         status = script.readyState;
         if ( status === "complete" ) {
            successHandler();
         }
      }
  }
}

您還可以調用此函數並分配回調。

loadMyJavaScript("http path of the script", function(path, status) {
     if ( status == "success") {
        you can load the next one or
        call your initPage();
    }

});