根据 iframe 内的内容调整 iframe 大小及其父高度答案

【问题标题】：Resize iframe and its parent height according to content inside iframe根据 iframe 内的内容调整 iframe 大小及其父高度
【发布时间】：2014-03-28 16:43:50
【问题描述】：

关于根据内容调整 iframe 高度的问题有很多，但如果内容太长并超过容器的高度怎么办。在这种情况下，我希望容器高度相应地调整大小，并且在将溢出设置为隐藏的情况下，iframe 不会滚动或修剪。我该怎么做？

【问题讨论】：

您是想从 iframe 中的 JS 调整 iframe 的大小，还是从包含的文档调整 iframe 的大小？ iframe 是某个域作为包含页面吗？
我正在尝试根据 iframe 的内容使用 js 调整 iframe 及其容器的大小。他们不在同一个域中。
您是想从 iframe 中的 JS 还是从包含文档中的 JS 处理？换句话说，您尝试从哪里执行此操作的 javascript？
它在包含的文档中。

标签： javascript jquery iframe

【解决方案1】：

由于您的文档和 iframe 是不同的域，因此其中一个的 javascript 不能直接访问另一个的 DOM（请参阅same-origin security restrictions）。这意味着您无法直接进入 iframe 的 DOM 以了解它想要多大，以便您可以从包含的文档中将 iframe 大小设置为该大小。

执行此操作的任何选项都需要在 iframe 中进行一些代码控制。例如，您可以在两个 iframe 之间支持window.postMessage()，包含文档可以通过window.postMessage() 询问 iframe 的大小，当它收到响应时，它可以更改 iframe 的大小。

各种参考资料：

cross-domain iframe resizer?

http://css-tricks.com/cross-domain-iframe-resizing/

Cross-domain, cross-browser Iframe communcation, made easy!

Yet Another cross-domain iframe resize Q&A

https://github.com/davidjbradshaw/iframe-resizer

【讨论】：

非常感谢 jfriend00。它有帮助。我收到了另一个关于将 iframe 溢出放在容器顶部的问题，但因为它与这个问题无关，所以我只是标记你的答案并为它打开另一个问题。
如果你问我，这应该被添加到 HTML/CSS 标准中，使用真正简单的设置，如 framewrap:vertical; 响应式文本可以是高的或短的：-/