Question

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

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

哪个替换了html，但是问题在于，它不会等到呈现新的正文之前就加载来自新html的css和js文件。因此，它会在某些ms内显示损坏的CSS（因为在显示body标签后会加载新页面开头的css文件），并且还会显示一些js错误（出于相同的原因）。

我需要从头开始以相同的顺序加载css和js文件，而不是异步加载。这个问题有什么解决办法吗？

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

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

但是实际情况更加复杂。我正在呼叫的页面包含很多JavaScript。首先，Javascript被定义为内部和外部脚本，并且必须按照与Java相同的顺序加载。

Answer 1

您可以使用SetTimeout方法并设置一些延迟时间，以从响应中呈现HTML。

Answer 2

您可以将其临时插入未显示的div中，然后等待内容加载，最后将真实的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文件）并检查是否已加载并且仅在这种情况下进行替换，则更好。

Ajax将HTML替换为响应，但在加载CSS，JS之后加载内容

2 个答案:

注意