根据iframe中的内容调整iframe的尺寸及其父级高度 [英] Resize iframe and its parent height according to content inside iframe

问题描述

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

There are many questions answered regarding resizing iframe height according to it's content, but what if the content gets too lengthy and exceeds the height of the container. In this case I want the container height to resize accordingly and without iframe getting scrolls or trimmed in case of setting overflow to hidden. How can I do this?

推荐答案

由于您的文档和iframe是不同的域，因此来自其中一个的javascript无法直接访问另一个的DOM(请参阅

Since your document and iframe are different domains, the javascript from one cannot directly access the DOM of the other (see same-origin security restrictions). That means that you cannot directly reach into the DOM of the iframe to find out how large it would like to be such that you can set the iframe size to that size from within the containing document.

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

Any options you have for doing this require some code control within the iframe. For example, you could support window.postMessage() between the two iframes and the containing document could ask the iframe how large it would like to be via window.postMessage() and when it receives the response, it could then change the iframe size.

各种参考文献:

跨域iframe调整器?

http://css-tricks.com/cross-domain-iframe-调整大小/

跨域，跨浏览器的iframe通讯非常简单！

但另一个跨域iframe调整大小的问题与答案

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

这篇关于根据iframe中的内容调整iframe的尺寸及其父级高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！