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

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

当前回答

显然有很多场景，但是，我有相同的域文档和iframe，我能够将此附加到我的iframe内容的末尾:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

这将“找到”父容器，然后设置长度加上50像素的模糊因子以删除滚动条。

这里没有任何东西可以“观察”文档高度的变化，这在我的用例中是不需要的。在我的回答中，我带来了一种引用父容器而不使用父/iframe内容中的id的方法。

2019-04-10 09:58:01

其他回答

如果内容只是一个非常简单的html，最简单的方法是用javascript删除iframe

HTML代码:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Javascript代码:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

2018-04-23 18:05:51

我知道这个帖子很旧了，但我相信这是另一种方式。我在我的代码中实现了。完美的工作在页面加载和页面大小调整:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

2015-09-12 16:29:44

如果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

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

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

2018-07-22 15:53:37

这里有几种方法:

<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

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

推荐文章

最新文章

标签