包含嵌入/发布的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>

Answer 1

简单的答案...你不能

\n\n

（对不起）

\n\n

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

\n\n

\n

在计算领域，同源策略是 Web 应用程序安全模型中的一个重要概念。该策略允许在源自同一站点 \xe2\x80\x93 的页面上运行的脚本，\n 方案、主机名和端口号 \xe2\x80\x93 的组合\n 可以访问彼此的 DOM，而无需\n特定的限制，但会阻止访问不同站点上的 DOM。

\n

\n\n

来源

\n\n

[...]

\n\n

\n

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

\n

\n\n

来源

\n\n

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

\n\n

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

\n\n

\n

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

\n

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

\n

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

\n

\n\n

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

\n

Answer 2

目前没有办法做到这一点.

You can, however, make the height a lot larger and hide the borders, this way the iframe scrollbar won't appear and the document will appear to be a part of your website.