jQuery，ajax，在其他页面内显示页面（如 iframe）答案

【问题标题】：jQuery, ajax, display page inside of other page (like iframe)jQuery，ajax，在其他页面内显示页面（如 iframe）
【发布时间】：2010-08-15 02:30:45
【问题描述】：

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

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

谢谢。

【问题讨论】：

这里的问题是“其他服务器”位。 Javascript 的跨域限制意味着 Javascript 所做的任何东西都可以与运行它的域之外的域进行交互。您是否考虑过服务器端解决方案？
你看，问题是，你可以通过服务器传递请求来“获取”一个页面，从而解决跨域问题（例如我对这个问题的回答stackoverflow.com/questions/3232668/… )，但它仍然不会复制 iframe 所做的事情，因为该页面上的 CSS 和 Javascript 会“溢出”并影响父页面，这与包含它的内框架不同。

标签： javascript jquery ajax iframe

【解决方案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 注入您的主站点，然后再将其提供给客户端的浏览器。

【讨论】：

谢谢大家。我会尝试代理，如果效果不好，我可能会因为 iframe 具有 js 高度。

【解决方案2】：

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

<?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");

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：