我已经搜索了一段时间，但我不知道如何通过 AJAX 加载整个页面并仍然执行所有 javascript 和 css。
大多数情况下，我只是以没有任何 CSS 的纯文本结尾。 有没有办法做到这一点？我尝试了 jQuery.get、jQuery.load 和 jQuery.ajax，但没有一个真正像那样工作。
【问题讨论】：
jQuery('html').load('/page');
标签： javascript jquery html css ajax
我有不同的解决方案。您可以使用iframe 进行尝试。使用 jQuery 将包含所有相关代码的 iframe 脚本附加到页面的某些部分（例如一些 div）。这可能对你有用，包括 CSS，比如；
$('<iframe src="your_page.html"/>').appendTo('#your_div');
或者你可以试试类似的东西；
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
【讨论】：
我已经解决了以下类似的问题。
<script> 和</script> 标签<script> 元素并在其中插入代码另一件事是您需要以某种方式调用脚本.. 我是这样做的：
我设置了标准化函数名称，例如 initAddedScript 回调，我在将脚本附加到页面后调用它。就像我在不再需要代码（及其变量......）时调用了 deinitScript 一样。
我必须说这是一个糟糕的解决方案，这可能意味着你的应用程序架构很糟糕，就像我一样:)
与 css 是一样的，但你不需要任何处理程序。只需将style 标记附加到您的文档头部即可。
【讨论】：
如果您加载的页面没有任何样式数据，则外部样式表必须具有不正确的相对路径相对于调用文档。请记住，这不是 iFrame -您不是在文档中构建外部文档，而是将一个文档合并到另一个文档中。
另一个问题是加载完整页面时还会加载doctype、html、head 和body 标签——现代浏览器大部分时间都可以处理这些标签，但结果是不确定的，因为将一个文档塞入另一个文档中是无效的 HTML。这让我想到了它不起作用的第三个原因：head 之外的 CSS 链接 部分无效， 以及放错位置的 head 部分由您随意的文档中文档拼贴造成的。
我会为合规（和正确渲染）做的是，这将在 Success 回调中实现：
link 元素复制到一个新的jQuery 元素中。script的内容到head部分body 标签中复制.html() 内容link 元素（在步骤1 中复制）附加到主文档的head
script 标记并将其粘贴到head 中复杂吗？有点，我猜，但如果你真的想使用 AJAX 加载整个页面，这是你唯一的选择。无论您做什么，它都会导致页面的 JavaScript 出现问题，尤其是应该在初始加载期间运行的代码。你对此无能为力。如果这是一个问题，您需要重写源页面以使其更易于加载，或者您可以弄清楚如何使 iFrame 满足您的需求。
首先将外部 CSS 加载到宿主文档中是否可行也是值得考虑的。
【讨论】：
我想你正在寻找这样的东西：
your page div --> load --> www.some-site.com
经过快速搜索，最接近的解决方案似乎是“And”的解决方案：Load website into DIV
您必须运行一个网络服务器并创建一个包含以下内容的proxy.php页面：
那么你的 JQuery load() 函数应该是这样的：
$("#your_div_id").load("proxy.php?url=http://some-site.com");
注意。我已经测试了这个解决方案，它不应该从目标页面加载所有 CSS，可能你必须重新创建它们。例如存储在远程服务器上的图像文件将不会加载，我想是由于身份验证策略。
您还可以仅查看目标页面，而无法浏览目标站点。
无论如何，我希望这可以为您的解决方案迈出一步。
【讨论】：
使用 ajax 将整个网页作为文本获取
document.open();
document.write(this.responseText);
document.close();
或
document.documentElement.outerHTML = this.responseText;
但是如果生成的网页在另一个目录中，则需要更改原始网页中css和js页面的路径。
【讨论】：