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

我有一个带有已发布的 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>

简单的答案...你不能

(sorry)

其原因是由于跨域策略 http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/ (more https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript, info http://en.wikipedia.org/wiki/Same_origin_policy）您无法访问iframe子文档，因此确定其height为了调整大小iframe因此，简单地说

在计算领域，同源策略是一个重要的概念。 Web 应用程序安全模型。该策略允许脚本运行在 来自同一站点的页面 – 方案的组合， 主机名和端口号 – 无需访问对方的 DOM 特定的限制，但阻止在不同的平台上访问 DOM 网站。

source http://en.wikipedia.org/wiki/Same_origin_policy

[...]

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

source https://stackoverflow.com/questions/9393532/cross-domain-iframe-issue

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

看来你想这样做的原因与设计有关。因此，您可能需要考虑不同的方法来在您的网站中实现内容（iframe），最明显的一种是对高度的自然限制是浏览器视口高度，因此也许使iframe100% 的视口（html、body）高度？虽然如果页面上有其他组件，这会干扰您的设计......但还有其他选择......iframe could:

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

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

3. 被控制（JS）与父窗口一起拉伸，也许有一个固定的bottom

另请记住，由于这是对此类内容的全局限制，因此用户并非完全不习惯看到它，因此尽管它不是理想的设计选择，但它不一定会让您网站的访问者感到困惑/惊讶。