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

Posted

技术标签:

【中文标题】将 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 的高度。

【讨论】:

以上是关于将 iframe 设置为远程内容的内容高度的主要内容,如果未能解决你的问题,请参考以下文章

如何将 iframe 高度和宽度设置为 100%

如何根据内容设置iframe的高度[重复]

iframe的高度可以随内容的多少而变化吗

jquery在加载时获取iframe内容的高度

iframe自适应高度设置(iframe自适应高度和宽度)

隐藏 iframe 的内容高度