关于javascript：jQuery，ajax，其他页面(如iframe)内的显示页面


jQuery, ajax, display page inside of other page (like iframe)

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

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

谢谢。

相关讨论

Mozilla添加了"跨站点请求"。这是新的HTML5标准。但是常见的是不允许跨站请求。因此，您必须执行前面提到的操作。如果您将使用PHP解决方案，请使用以下命令：

1
2
3
4
5
6
7
8
9
<?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");

除非您的外部内容是从与主网站相同的域中提供的，否则使用AJAX进行此类操作并非易事，因为您将遇到相同的原始策略。

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

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

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

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

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

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

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

  • 根据其中的内容高度调整iframe的高度
  • 动态调整iframe的大小

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

相关讨论

根据定义，由于相同的原始策略，Ajax仅可在同一服务器上工作。您需要做的是从另一个服务器中的一个页面加载一个PHP文件(我们称它为xxx.php)。
然后，您可以使用以下代码在div yyy中加载xxx.php：

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

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

另一种选择是仅使用iframe，并让JavaScript获取内容高度，并将iframe高度设置为相同(加上填充，以便浏览器不显示滚动条)。