2

我已经搜索了一段时间，但我不知道如何通过 AJAX 加载整个页面并仍然执行所有 javascript 和 css。

大多数情况下，我只是得到没有任何 CSS 的纯文本。有没有办法做到这一点？我尝试了 jQuery.get、jQuery.load 和 jQuery.ajax，但没有一个真正像那样工作。

4

5 回答 5

2

我有一个不同的解决方案。您可以尝试使用iframe. 使用 jQuery 将包含所有相关代码的 iframe 脚本附加到页面的某些部分（例如 some 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');
于 2012-09-05T07:13:24.277 回答
2

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

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

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

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

我必须说这是一个糟糕的解决方案，这可能意味着你的应用程序架构很糟糕，就像我一样:)

与 css 相同，但您不需要任何处理程序。只需将标签附加style到您的文档头。

于 2012-09-05T06:37:33.307 回答
1

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

另一个问题是，加载完整的页面还会加载doctype、html、head和body标签——现代浏览器在大多数情况下都会处理这些标签，但结果是不确定的，因为将一个文档塞入另一个文档不是有效的 HTML。这让我想到了它不起作用的第三个原因：该部分之外的 CSS 链接 head 无效，head以及由您随意的文档中文档拼贴造成的错位部分。

我会为合规性（和正确渲染）做的是，这将在 Success 回调中实现：

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

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

还值得考虑的是，首先将外部 CSS 加载到宿主文档中是否可行。

于 2012-09-05T07:35:33.757 回答
0

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

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

经过快速搜索，最接近的解决方案似乎是“和”的解决方案：将网站加载到 DIV

您必须运行一个Web 服务器并创建一个proxy.php包含以下内容的页面：

那么你的 JQuery load() 函数应该是这样的：

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

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

无论如何，我希望这可能是您解决方案的一步。

于 2012-09-05T08:03:46.230 回答
0

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

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

    或者

    document.documentElement.outerHTML = this.responseText;

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

于 2019-01-07T14:01:40.463 回答