Question

我需要在页面内部显示页面，如iframe，但使用jquery。这些页面不在同一台服务器上。

主页面是cms内部的html页面，需要嵌套的页面是包含图像或音频文件列表的媒体页面，位于另一台服务器上。媒体页面的高度会有所不同，所以我有点想远离iframe ...在jquery中有一个简单的调用，它会像iframe一样抓取一个页面......或者如果js被转动就会降级为iframe在浏览器级别关闭？

感谢。

Answer 1

除非您的外部内容与主网站在同一个域中提供，否则使用AJAX进行此类操作并不容易，因为您会碰到same origin policy。

解决同一原始策略的一个解决方案是在服务器上设置一个简单的reverse proxy，这将允许浏览器使用AJAX请求的相对路径，而服务器将充当代理到任何远程位置。

如果在Apache中使用mod_proxy，则设置反向代理的基本配置指令是ProxyPass。它通常按如下方式使用：

ProxyPass     /external/     http://other-domain.com/

在这种情况下，浏览器可以请求/external/index.html作为相对URL，但服务器将通过充当http://other-domain.com/index.html的代理来提供此服务。

然后在您的JavaScript中，您将能够使用jQuery load()方法，如下所示：

$('#your_div').load('external/index.html');

另一种选择是使用iframe，并使用JavaScript动态调整其高度。您可能需要查看以下Stack Overflow帖子以进一步阅读此主题：

您可能还需要考虑上面评论中建议的@Yi Jiang完整服务器端解决方案。您可以将HTML从外部站点注入主站点，然后再将其提供给客户端的浏览器。

Answer 2

Mozilla已添加跨站点请求。这是一个新的HTML5标准。但常见的是不允许跨站点请求。所以你必须做一些像之前提到的事情。如果您将使用PHP-Solution，请使用：

<?php
    $external = file_get_contents($_POST['external']);
    echo $external;
?>

$().post("ajax.php", {external: "http://www.example.com/"}, function(data) {
    html = $("div#extract", data).html();
    $("div#insert").html(html);
}, "html");

Answer 3

您将很难从其他域获取Ajax内容。浏览器不允许它阻止跨站点脚本攻击（XSS）。您可以使用基于php的代理，cURL或google Ajax API。

另一种方法是只使用iframe，让JavaScript获得内容高度，并将iframe高度设置为相同（加上填充，以便浏览器不显示滚动条）。

Answer 4

根据定义，Ajax仅在同一服务器上运行，因为源策略相同。您需要做的是从PHP文件中的另一台服务器加载页面（我们称之为xxx.php）。然后，您可以使用以下代码在div yyy中加载xxx.php：

$("#yyy").load("xxx.php");

jQuery，ajax，显示其他页面内的页面（如iframe）

4 个答案: