包含嵌入/发布的 Google 文档的 Iframe 的自动高度

Question

我有一个带有已发布的 Google 文档的 iframe。该文档的内容可能会发生变化，所以我想根据其内容自动调整 iframe 的高度。我为此找到了一些解决方案，但它们都需要访问子文档的头部。有没有人知道如何做到这一点？

您可以在下面查看我使用的代码的摘录：

 #faq{
height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
}

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>

原文由 celalalt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简单的答案……你不能

（对不起）

原因是由于 跨域策略（ 更多 信息），您无法访问 iframe 子文档并因此确定其 height 以调整 iframe 的大小因此，简单地说

在计算领域，同源策略是 Web 应用程序安全模型中的一个重要概念。该策略允许在源自同一站点（方案、主机名和端口号的组合）的页面上运行的脚本在没有特定限制的情况下访问彼此的 DOM，但阻止访问不同站点上的 DOM。

资源

[…]

如果您无法控制框架站点，则无法规避跨域策略。

资源

如果你不能这样做，你就不能做你想做的，因为没有办法确定子文档的高度。

您这样做的原因似乎与设计相关。因此，您可能想看看在您的站点内实现内容 (iframe) 的不同方法，最明显的方法是对高度的自然限制是浏览器视口高度，因此也许使 iframe 100%视口（html，正文）的高度？虽然如果页面上有其他组件，这会干扰您的设计……但还有其他选择…… iframe 可以：

1. 与页面的一侧对齐，高度设置为 100%

2. 放置在高度/宽度为 100% 的弹出窗口或模态窗口中

3. 被控制（JS）随父窗口拉伸，也许用固定的 bottom

还要记住，由于这是对此类内容的全球限制，用户并非完全不习惯看到它，因此虽然这不是一个理想的设计选择，但它不一定会使您网站的访问者感到困惑/惊讶。

原文由 SW4 发布，翻译遵循 CC BY-SA 3.0 许可协议