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