调整iframe的宽度和高度以适应其中的内容

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

当前回答

这里有几种方法:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

还有另一种选择

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

隐藏滚动与2个替代方案如上所示

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

使用第二代码进行破解

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

为了隐藏iFrame的滚动条，父元素被设置为“overflow:hidden”来隐藏滚动条，iFrame的宽度和高度被设置为150%，这迫使滚动条在页面之外，由于主体没有滚动条，人们可能不会期望iFrame超出页面的边界。这将隐藏iFrame的全宽度滚动条!

来源:设置iframe自动高度

2013-06-27 12:32:32

其他回答

对于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如果没有缩放是实现

2017-12-23 18:04:39

跨浏览器jQuery插件。

cross -bowser, cross - domain library，使用mutationObserver来保持iFrame的大小与内容一致，使用postMessage在iFrame和主机页面之间进行通信。使用或不使用jQuery。

2010-10-04 09:09:33

我稍微修改了上面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>

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

2012-07-11 06:22:41

Javascript被放置在头文件:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

下面是iframe html代码:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Css样式表

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

2016-02-27 05:55:23

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

parent.jQuery("#frame").height(document.body.scrollHeight+50);

2018-07-22 15:53:37

调整iframe的宽度和高度以适应其中的内容

推荐文章

最新文章

标签