我需要一个自动调整iframe的宽度和高度的解决方案,以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化。


当前回答

如果你可以使用固定的纵横比,并且你想要一个响应式iframe,这段代码将对你很有用。这只是CSS规则。

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

iframe必须有一个div作为容器。

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

源代码是基于这个网站和Ben Marshall有一个很好的解释。

其他回答

这是onload或当事情发生变化时我是怎么做的。

parent.jQuery("#frame").height(document.body.scrollHeight+50);
<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

如果你可以控制IFRAME内容和父窗口,那么你需要IFRAME调整器。

这个库允许自动调整相同域和跨域iframe的高度和宽度,以适应它们所包含的内容。它提供了一系列功能来解决使用iFrames时最常见的问题,包括:

Height and width resizing of the iFrame to content size. Works with multiple and nested iFrames. Domain authentication for cross domain iFrames. Provides a range of page size calculation methods to support complex CSS layouts. Detects changes to the DOM that can cause the page to resize using MutationObserver. Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events). Simplified messaging between iFrame and host page via postMessage. Fixes in page links in iFrame and supports links between the iFrame and parent page. Provides custom sizing and scrolling methods. Exposes parent position and viewport size to the iFrame. Works with ViewerJS to support PDF and ODF documents. Fallback support down to IE8.

最简单的方法是设置iframe的高度,如果你知道文档的高度是什么,如果它是固定的。

可以创建一个“幽灵般的”IFrame,就像它不存在一样。

参见http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

中描述的事件系统parent.postMessage(..) https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

这适用于所有现代浏览器!