javascript - Ajax 用响应替换 html 但在加载 css、js 后加载内容

Question

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

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

它取代了 html，但问题是它不会等待 css 和 js 文件(来自新的 html)在呈现新主体之前加载。由于这个原因，它显示了一些 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 中被定义为外部脚本和内部脚本，并且必须以与在那里相同的顺序加载。

Answer 1

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