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

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

当前回答

简单性:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

2016-07-21 08:15:47

其他回答

我使用这段代码自动调整所有iframe(类autoHeight)的高度，当他们加载在页面上。经过测试，它可以在IE, FF, Chrome, Safari和Opera中工作。

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

2012-10-01 11:27:54

如果iframe内容来自相同的域，这应该工作得很好。但是它确实需要jQuery。

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

要动态调整它的大小，你可以这样做:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

然后在iframe加载的页面上添加这个:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

2012-08-01 15:17:59

使用bootstrap的嵌入响应类，它最初是为youtube视频，但你可以调整它的高度。

如果你不能使用javascript，我建议使用引导和玩周围的嵌入响应-***类的html。我能够通过添加填充底部作为百分比来实现同样的效果，从而进一步相应地调整它。

<span class="iframe embed-responsive embed-responsive-16by9" style="display:block; padding-bottom: 10%;">
<iframe class="embed-responsive-item" width="100%" scrolling="no" src="example.com" frameBorder="0" ></iframe>
</span>

2022-04-13 14:34:29

经过一番试验，我想出了另一个解决办法。我最初尝试了标记为“最佳答案”的代码来回答这个问题，但它不起作用。我的猜测是因为当时程序中的iframe是动态生成的。下面是我使用的代码(它对我有用):

正在加载的iframe中的Javascript:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

有必要在高度上增加4个或更多像素来移除滚动条(一些奇怪的bug/ iframes的效果)。宽度更奇怪，你可以安全地添加18px的宽度的主体。还要确保应用了iframe主体的css(如下所示)。

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

下面是iframe的html:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

以下是我的iframe中的所有代码:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

我在chrome和firefox (windows xp)中做过一些测试。我还有更多的测试要做，所以请告诉我这是如何为你工作的。

2015-06-17 04:08:51

<iframe src="..." style="border:none; width:100%; height: 100vh;"></iframe>

2020-07-27 19:20:15

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

推荐文章

最新文章

标签