Ajax用响应替换html，但在加载css，js后加载内容
Posted
技术标签:
【中文标题】Ajax用响应替换html，但在加载css，js后加载内容【英文标题】：Ajax replace html with response but load content after css,js are loaded 【发布时间】：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 文件的顺序与它们所在的顺序相同，而不是异步加载。这个问题有解决办法吗？
例如，您可以将其放入尚未缓存 *** 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。 【参考方案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 文件）并检查是否已加载并仅在这种情况发挥作用时替换它会更好。
【讨论】：
以上是关于Ajax用响应替换html，但在加载css，js后加载内容的主要内容，如果未能解决你的问题，请参考以下文章
css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题