Ajax用响应替换html，但在加载css，js后加载内容答案

【问题标题】：Ajax replace html with response but load content after css,js are loadedAjax用响应替换html，但在加载css，js后加载内容
【发布时间】：2019-11-25 23:22:32
【问题描述】：

我需要用 ajax 响应替换整个 html。我试过这个：

      $.ajax({                                   
         type: "GET",                           
         url: url                                     
       }).done(function(response) {
            document.documentElement.innerHTML = response;               
      });

它替换了 html，但问题是它不会等待 css 和 js 文件（来自新的 html）在新的 body 被渲染之前被加载。由于这个原因，它显示了一些 ms 的损坏的 css（因为在显示 body 标签后加载了新页面头部的 css 文件）并且它还显示了一些 js 错误（出于相同的原因）。

我需要从 head 加载 css 和 js 文件的顺序与它们所在的顺序相同，而不是异步加载。这个问题有解决办法吗？

例如，您可以将其放入尚未缓存 stackoverflow css 的浏览器的控制台中：

$.ajax({                                   
   type: "GET",                           
   url: window.location.origin                                     
 }).done(function(response) {
      document.documentElement.innerHTML = response;               
});

但实际情况要复杂得多。我正在调用的页面有很多 javascript。 Javascript 在 head 中被定义为外部和内部脚本，并且必须按照与它在那里相同的顺序加载。

【问题讨论】：

看起来你正在注入 body 的子节点，所以也许你可以将 ajax 调用放入一个 onload 处理程序中，该处理程序在 head 的 css 已经加载之前不会触发。
我说的是来自新页面的 css、js 文件，我用 ajax 加载它，不存在。
所以你要在现有页面中注入一个新的头部和身体？
临时将它插入到一个不可见的 DOM 元素中，当内容被加载时，用它替换整个 HTML 怎么样？
根据您目前所说的，我认为您可能需要自己解析响应，然后逐步重建 DOM。

标签： javascript jquery html ajax dom

【解决方案1】：

您可以使用 SetTimeout 方法并设置几秒钟的延迟以从响应中呈现 HTML。

【讨论】：

【解决方案2】：

你可以暂时把它插入到div中，它不显示，然后等待内容加载，最后用这个例子sn-p中的内容替换真正的HTML：

$.ajax({                                   
  type: "GET",                           
  url: url                                     
}).done(function(response) {
  let temp = document.getElementById('tempSaver');
  temp.innerHTML = response; // Insert content in invisible div
  
  setTimeout(() => { // After 1 second replace the real HTML
    document.documentElement.innerHTML = temp.innerHTML;
    temp.innerHTML = '';
  }, 1000);
});

#tempSaver {
  display: none;
}

<html>
  <div id="tempSaver">
  </div>
</html>

注意

虽然我使用setTimeout，但如果您可以指定需要加载的内容（例如 CSS 文件）并检查是否已加载并仅在这种情况发挥作用时替换它会更好。

【讨论】：