включить html файлов и дождаться всех загрузок перед запуском js

Question

Мне нужно включить несколько файлов HTML в мой основной файл index.html и выполнить некоторый код, когда включенные элементы HTML завершат загрузку. Я использую следующий код для загрузки файлов HTML:

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4) {
          if (this.status == 200) {
            elmnt.innerHTML = this.responseText;
          }
          if (this.status == 404) {
            elmnt.innerHTML = "Page not found.";
          }
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("include-html");
          includeHTML();
        }
      };
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      console.log("FILENAME: " + file);
      console.log("Finished html loader IF FILE");
      return;
    }
  }
}

Поскольку эта функция загружает мои файлы рекурсивно, я не могу использовать window.onload или соответствующий jquery для запуска после того, как моя DOM закончил загрузку. Предполагаемое поведение должно быть таким (сценарий находится в нижней части тега body):

<script type="text/javascript">
  includeHTML();

  window.onload = function () {
    console.log("DOM loaded");
    // Do stuff after includeHTML is done and all DOM Elements can be retrieved with
    // document.getElementById();
  };
</script>

Прямо сейчас, если я запускаю код js, который нужно выполнить, запросы X HTML все еще не завершил загрузку всего моего содержимого DOM, но код js все равно выполняется, мне нужно убедиться, что все содержимое HTML доступно, прежде чем продолжить работу.

Answer 1

Я думаю, у вашего кода в основном проблемы с synchronous природой JavaScript >> Когда JavaScript синхронно?

Итак, я не знаю вы можете сделать функцию async, чтобы ваш код не выполнялся параллельно. Возможно, ответы на Надлежащий способ дождаться завершения одной функции sh перед продолжением? могут пролить на это некоторый свет.

Но альтернативным и более простым подходом к этому может быть с использованием функции jquery .load() как таковой:

function includeHTML() {
  var z, i, elmnt, file;

  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");

  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("include-html");

    /* only use elements having this attribute: */
    if (file) {
      elmnt.load(file);
      elmnt.removeAttribute("include-html");
    }
  }
}

PS Используемый вами код является реализацией Как включить HTML | W3Schools . Итак, этот код работает для w3-include-html как атрибут, и я думаю, он должен работать и для include-html. Но W3 загружает только один div, а вы делаете много, поэтому удаление return может сработать.