将 iframe 设置为远程内容的内容高度

Posted 2023-03-06

【中文标题】将 iframe 设置为远程内容的内容高度

【英文标题】：Set iframe to height of content for remote content

【发布时间】：2010-10-02 18:33:55

【问题描述】：

论坛已经回答了如何使 iframe 适合 100% 的内容（使用 javascript）的问题......仅适用于显示来自同一域的内容的 iframe。 p>

我的问题：当 iframe src 属性用于包含框架的页面域之外的页面时，是否可以调整 iframe 的大小以适应内容？围绕跨站点脚本的浏览器安全功能阻止我访问 iframe 的文档对象。

我正在寻找任何有创意的解决方案。我的一个想法是以某种方式检测到 iframe 上的滚动条可见，并逐渐增加高度直到它们不可见。不幸的是，我也找不到任何检测可见滚动条的方法。想法？

请注意，我正在寻找客户端解决方案。

回复：

---

戴夫

问题仍然存在——我不提前知道远程文档的高度，所以我无法从数据库或查询字符串值中设置它。

---

杜软

CSS 中 iframe 上的 100% 不会将其设置为 iframe inside 内容的 100%，而是相对于页面或包含元素（即 div 或其他内容）。

【参考方案1】：

听起来您正在尝试解决一个有充分理由实施的安全功能......

调整大小是否必须通过脚本？您可以重定向到 iframe 大小取自查询字符串、数据库或配置文件等的页面。

【参考方案2】：

当 iframe src 属性用于包含框架的页面域之外的页面时，是否可以调整 iframe 的大小以适应内容？

可以绕过跨站点限制并将 iframe 设置为其内容的高度，但让它工作起来可能有点尴尬。

该解决方案涉及通过让 iframe 内容本身 iframe 与父页面位于同一服务器上的页面来解决安全模型，并且它可以与之通信。在here 之前，我已经回答了一个与此类似的问题，其中详细介绍了设置它的来龙去脉。

对所描述方法的警告是，您必须有方法将 iframe 内容获取到自身 iframe 父服务器上的页面。当 iframed 内容作为网站之间商定的合作伙伴关系的一部分存在时，这通常是可以实现的，但 YMMV。

【参考方案3】：

这是理论上的，因为我没有测试过：

1) php 将远程页面保存到一个 本地 html 文件使用 file_get_content() 或使用 CURL。 2）Javascript将本地文件加载到 框架 - 它现在是本地的，安全问题不适用。

如果有 javascript vars 或 Session vars（无法从远程内容中提取），您至少可以使用此技术来查询本地文件的文档高度，相应地设置 iframe，然后将远程 URL 加载到调整大小的iframe。

Cavat：您无法知道远程页面中页面更改的 URL，因此您只能在第一页上使用此技术。如果远程页面的高度都相同，这没问题。

【参考方案4】：

（我对a similar question的回答）

由于浏览器的安全模型，如果不对正在 iframe 的页面进行一些控制，则不可能执行此操作。如果可能，那将是一个安全问题，必须加以修复。

虽然在嵌入页面时让嵌入站点知道第三方网页的高度似乎无害，但这可能会将浏览器用户想要保密的信息泄露给嵌入站点。例如，http://www.facebook.com/ 根据您是否登录而呈现不同，因此如果我的网站可以计算出<iframe src="http://www.facebook.com/"> 的高度，那么我可以计算出您是否是 facebook 用户，而您可能不会不想让我知道。

信息泄露类似于臭名昭著的CSS History Leak，浏览器供应商必须插入。

【参考方案5】：

不是最好的解决方案，但您可以尝试：

javascript 编写 iframe，在 iframe 应用程序中设置 url #h700 中的当前高度为 700px 等；然后使用循环在主机站点“在 javascript”中侦听该更改以读取 src="url#h700" 并以此设置 iframe 的高度。