通过AJAX加载页面并执行javascript和CSS

Question

我一直在寻找一段时间，但我无法弄清楚如何通过AJAX加载整个页面并仍然执行所有javascript和css。

大多数情况下，我最终只使用没有任何CSS的纯文本。 有没有办法做到这一点？我尝试过jQuery.get，jQuery.load和jQuery.ajax，但没有一个真的那样。

Answer 1

我已经解决了类似的问题如下。

1. 通过ajax下载网页
2. 将其迭代并找到任何<script>和</script>标记
3. 从这些标记中获取内容作为文本
4. 创建新的<script>元素并在其中插入代码
5. 将标记附加到您的网页

另一件事是你需要以某种方式调用脚本.. 我这样做了：

我设置了标准化的函数名称，例如我将脚本附加到页面后调用的initAddedScript回调函数。当我不再需要代码（及其变量，..）时调用deinitScript相同。

我必须说这是一个糟糕的解决方案，这可能意味着你有不好的应用程序架构，所以我有：）

使用css是一样的，但你不需要任何处理程序。只需将style标记附加到您的文档头。

Answer 2

我有一个不同的解决方案。您可以使用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');

Answer 3

如果您加载的页面没有任何样式数据，则外部样式表必须具有相对于调用文档的相对路径。请记住，这不是iFrame - 您没有在文档中构建外部文档，而是将一个文档合并到另一个文档中。

另一个问题是，加载完整页面还会加载doctype，html，head和body标记 - 现代浏览器将应对大多数时间，但结果是未定义的，因为它不是有效的HTML将一个文件塞进另一个批发。这让我想到了它不起作用的第三个原因： head 部分之外的CSS链接无效，且错位{{ 1}}由您随意的文档文档拼贴引起的部分。

我对合规性（以及正确呈现）所做的是这个，它将在Success回调中实现：

1. 将所有head元素复制到新的jQuery元素。
2. 复制link部分
中所有script的内容
3. 复制已加载文档的head标记
中的.html()内容
4. 将body元素（在步骤1中复制）附加到主文档的link
5. 使用您复制的脚本内容创建一个新的head标记，并将其粘贴在script中
6. 完成！

复杂？我想，有点，但如果你真的想用AJAX加载整个页面，那么这是你唯一的选择。无论你做什么，它也会导致页面的JavaScript出现问题，特别是在初始加载期间应该运行的代码。你无能为力。如果这是一个问题，您需要重写源页面以更加负载，或者您可以弄清楚如何使iFrame满足您的需求。

同样值得考虑的是，首先在主机文档中加载外部CSS是否有效。

Answer 4

我想你正在寻找这样的东西：

your page div --> load --> www.some-site.com

在quik搜索之后，最接近的解决方案似乎是“ And ”：Load website into DIV

您必须运行网络服务器并使用此内容创建proxy.php页面：

然后你的JQuery load（）函数应该是这样的：

$("#your_div_id").load("proxy.php?url=http://some-site.com");

NB。我测试了这个解决方案，它不应该从目标页面加载所有的CSS，可能你必须重新创建它们。例如，由于身份验证策略，我认为存储在远程服务器上的图像文件不会被加载 您还可以只查看目标页面，而无法浏览目标站点。

无论如何，我希望这可以向你的解决方案迈进一步。

Answer 5

1. 使用ajax将整个网页作为文本获取

2. df1 Name ID 0 Albert 0 1 Eva 1 2 Jack 2 3 John 3 4 Sara 4

   OR

   document.open(); document.write(this.responseText); document.close();

但是，如果生成的网页位于另一个目录中，则需要更改原始网页中的CSS和JS页面的路径。