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


当前回答

我稍微修改了上面Garnaph的解决方案。似乎他的解决方案根据事件发生前的大小修改了iframe的大小。对于我的情况(通过iframe提交电子邮件),我需要在提交后立即改变iframe的高度。例如,在提交后显示验证错误或“谢谢”消息。

我只是消除了嵌套的click()函数,并将其放入我的iframe html:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

对我来说有用,但不确定跨浏览器功能。

其他回答

以防有人说到这里 当我从iframe中删除div时,我有一个解决方案的问题- iframe没有变短。

有一个Jquery插件,做的工作:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

这是我怎么做的(在FF/Chrome测试):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></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.

对于angularjs的directive属性:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

注意百分比,我插入它,这样你可以对抗缩放通常做的iframe,文本,广告等,简单地放0如果没有缩放是实现

function resizeIFrameToFitContent(frame) {
if (frame == null) {
    return true;
}

var docEl = null;
var isFirefox = navigator.userAgent.search("Firefox") >= 0;

if (isFirefox && frame.contentDocument != null) {
    docEl = frame.contentDocument.documentElement;
} else if (frame.contentWindow != null) {
    docEl = frame.contentWindow.document.body;
}

if (docEl == null) {
    return;
}

var maxWidth = docEl.scrollWidth;
var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));

frame.width = maxWidth;
frame.height = maxHeight;
frame.style.width = frame.width + "px";
frame.style.height = frame.height + "px";
if (maxHeight > 20) {
    frame.height = maxHeight;
    frame.style.height = frame.height + "px";
} else {
    frame.style.height = "100%";
}

if (maxWidth > 0) {
    frame.width = maxWidth;
    frame.style.width = frame.width + "px";
} else {
    frame.style.width = "100%";
}
}

iFram风格:

.myIFrameStyle {
   float: left;
   clear: both;
   width: 100%;
   height: 200px;
   padding: 5px;
   margin: 0px;
   border: 1px solid gray;
   overflow: hidden;
}

iframe的日子:

<iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>

脚本标签:

<script type="text/javascript">
   $(document).ready(function () {
      $('myIFrame').load(function () {
         resizeIFrameToFitContent(this);
      });
    });
</script>