例如:

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>


我希望它能够根据其中的内容调整高度,而无需使用滚动键。

评论

这可以通过CSS来完成。css中有一个称为媒体查询的概念,其中根据屏幕尺寸调整内容的大小

Angular iFrame自动高度:gitlab.com/reduardo7/angular-iframe-auto-height

“ Angular…”,即是否需要Javascript?换句话说,由于跨站点脚本限制,不能在跨站点iframe上执行此操作,对吗?正如@ clankill3r所暗示的,这表明需要一个纯CSS解决方案来解决这个问题!

#1 楼

将此添加到您的<head>部分:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>


,然后将iframe更改为此:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />


在现场讨论中。

评论


如果由于相同的原产地政策,如果iframe包含来自其他域的内容,则此方法将不起作用,SO上还有另一个问题,其中包含一些跨域解决方案stackoverflow.com/questions/5589756/…

–加科
13年3月27日在12:13

如果iframe的内容的高度因js而变化(例如,滑块),则该解决方案似乎不起作用

– shababhsiddique
13-10-20在4:59

应该是onload =“ resizeIframe(this);” :)

–rationalboss
2013年12月20日12:40



它们是您还需要考虑的其他一些问题,iframe中的内容更改,浏览器被调整大小,当您第一次检查iframe并跨域时iframe没有完全加载。我整理了一个小图书馆,因为找不到适合所有问题的解决方案。 github.com/davidjbradshaw/iframe-resizer

–大卫·布拉德肖(David Bradshaw)
2014年3月23日13:17在

如果iframe的内容在加载后增加高度,则可能需要将滚动更改为自动。

–rybo111
15年11月29日在17:03

#2 楼

您可以使用此库,该库最初可以正确调整iframe的大小,还可以通过检测iframe内容的大小是否发生变化(通过定期检查setIntervalMutationObserver)并调整大小来保持其正确大小。 >
https://github.com/davidjbradshaw/iframe-resizer

它们也是React版本。

https://github.com/davidjbradshaw / iframe-resizer-react

这适用于跨域和相同域的iframe。

评论


这是迄今为止最可靠的解决方案。

–brockis
18 Mar 15 '18 at 0:41

注意:用于跨网域时,要求您能够将js文件注入到iframe中...如果您不控制iframe源,这似乎不是一个可行的选择。

–凯尔·贝克(Kyle Baker)
18年3月28日在6:00



该库中的一个主要错误是它无法处理vh。

–RickardElimää
19年7月15日在7:59

@RickardElimää很乐意接受PR修复vh。

–大卫·布拉德肖(David Bradshaw)
19年12月1日在18:49

对我来说没有用

– Michael-woreda-net
5月4日16:07

#3 楼

这是精简版:

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>


评论


我没有在其他浏览器上尝试过此操作,但我需要在Chrome中添加10px像素,否则将显示垂直滚动条。我做了this.style.height =(this.contentDocument.body.scrollHeight + 15)+'px';只是为了确保它看起来还可以。

–迈克
2015年10月9日在4:43



此解决方案添加“ max-height:400px!important;”来固定最大高度对于我的情况而言是完美的。

– Yazid Erman
16年1月26日在6:49

它应该是onload =“ this.style.height = this.contentWindow.document.body.scrollHeight +'px';”

–mok
18/12/25在9:17

两者都会做。试试看。

–崇立彭彭
18/12/26在1:59

无法正常工作。.阻止访问源为“ {url}”的框架的跨源框架。

– Arjun
19-10-7在8:53

#4 楼

hjpotter92的建议在野生动物园中不起作用!
我对该脚本进行了小幅调整,因此现在也可以在Safari中使用。

唯一的变化是将每个高度都重置为0加载以使某些浏览器降低高度。

将其添加到<head>标签:

<script type="text/javascript">
  function resizeIframe(obj){
     obj.style.height = 0;
     obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>


,并将以下onload属性添加到您的iframe,就像这样

<iframe onload='resizeIframe(this)'></iframe>


评论


如果iframe内容来自srcdoc属性,这也将不起作用。高度将设置错误。

– Myforwik
2014年7月14日在1:04



首先将高度设置为零不仅适用于IE。

–黑桃
2014年9月6日下午16:46

谢谢,这可能应该是对hjpotter的后记的评论/建议。

–ᴍᴀᴛᴛʙᴀᴋᴇʀ
2015年2月25日在15:38

您不需要封装{}的

–史蒂文·瓦雄
15年3月9日在21:30

obj.style.height = 0;是非常重要的一行,这会导致scrollHeight重新计算(否则,contentWindow的高度只会增加)。

–马克西姆·朱可夫(Maxim Zhukov)
16年5月17日在16:16



#5 楼

hjpotter92答案在某些情况下可以很好地工作,但是我发现iframe内容在Firefox和IE中经常会出现底线,而在Chrome中则很好。

以下内容对我来说很有效,并解决了裁剪问题。该代码位于http://www.dyn-web.com/tutorials/iframes/height/。我做了一些修改,将onload属性从HTML中删除。将以下代码放在<iframe> HTML之后和关闭</body>标签之前:

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>


您的iframe HTML:

<iframe id="ifrm" src="some-iframe-content.html"></iframe>


请注意,如果您希望将Javascript包含在文档的<head>中,则可以还原为在onload HTML中使用内联iframe属性,如dyn-web网页中一样。

评论


这是唯一为我工作的人。非常感谢!

–雅瑟·贾鲁夫(Yasser Jarouf)
18年7月7日在19:48

#6 楼

避免使用内联JavaScript;您可以使用以下类:

<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>


并使用jQuery引用它:

$('.iframe-full-height').on('load', function(){
    this.style.height=this.contentDocument.body.scrollHeight +'px';
});


#7 楼

jQuery的.contents()方法方法允许我们搜索DOM树中元素的直接子代。


$('iframe').height( $('iframe').contents().outerHeight() );


请记住,iframe内部页面的主体必须具有其高度

CSS:

body {
  height: auto;
  overflow: auto
}


评论


在您的答案中添加演示以使其更具价值。

–史蒂芬(Stephan)
15年3月22日在15:01

这对我有用,但仅在删除“ body”以使其contents()时有效

–Simon_Weaver
16年8月23日在6:19

与以前相同的问题,跨源不起作用

– Nuander
17年1月25日在22:56

jQuery('iframe')。height(jQuery('iframe')。contents()。find('body')。height());在iframe加载后为我工作

– Michael L Watson
17年9月9日在16:27

#8 楼

尝试在IE11上使用

<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>


评论


你为什么要为一个浏览器写东西?具有许多操作系统和许多浏览器的许多人都可以查看您的站点。

–ctrl-alt-delor
16年1月3日,15:57

作品! (在Chrome,Firefox,Safari,IE上)

– strix25
19年7月11日在12:16

#9 楼

这对我有用(也可以在一页上使用多个iframe):

$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});


#10 楼



将其放在页面底部。

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="application/javascript" src="/script/jquery.browser.js">
</script>

<script type="application/javascript" src="/script/jquery-iframe-auto-height.js">
</script>

<script type="application/javascript"> 
  jQuery('iframe').iframeAutoHeight();
  $(window).load(
      function() {
          jQuery('iframe').iframeAutoHeight();  
      }
  );

  // for when content is not html e.g. a PDF
  function setIframeHeight() {
      $('.iframe_fullHeight').each(
          function (i, item) {
              item.height = $(document).height();
          }
      );
  };

  $(document).ready( function () {
      setIframeHeight();
  });
  $(window).resize( function () {
      setIframeHeight();
  });
</script> 


前半部分来自??? ,并且在iframe中包含html时起作用。
当iframes类为iframe_fullHeight时,后半部分将iframe设置为页面高度(而不是内容高度)。如果内容是PDF或其他类似内容,则可以使用它,但是必须设置类。也只能在适合全高的情况下使用。

注意:由于某些原因,当调整窗口大小后重新计算时,高度会出错。

#11 楼

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}


将此添加到您的iframe:
onload =“ autoResize('youriframeid')”

#12 楼

jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ; 
jq2('#stocks_iframe').css('height',iframe_width); });

<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>


#13 楼

我过去在为动态创建的iframe调用iframe.onload时遇到问题,所以我采用了这种方法来设置iframe大小:

iFrame视图

var height = $("body").outerHeight();
parent.SetIFrameHeight(height);


主视图

SetIFrameHeight = function(height) {
    $("#iFrameWrapper").height(height);
}


(这仅在两个视图位于同一域中时才起作用)

#14 楼

我是用AngularJS做到的。 Angular没有ng-load,但是制作了第3方模块;使用下面的Bower安装,或在此处找到它:https://github.com/andrefarzat/ng-load

获取ngLoad指令:bower install ng-load --save

设置iframe:

<iframe id="CreditReportFrame" src="about:blank" frameborder="0" scrolling="no" ng-load="resizeIframe($event)" seamless></iframe>


控制器调整大小iframe功能:

$scope.resizeIframe = function (event) {
    console.log("iframe loaded!");
    var iframe = event.target;
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};


#15 楼

我想让iframe的行为像普通页面一样(我需要在iframe元素内制作全屏横幅),所以这是我的脚本:

    (function (window, undefined) {

    var frame,
        lastKnownFrameHeight = 0,
        maxFrameLoadedTries = 5,
        maxResizeCheckTries = 20;

    //Resize iframe on window resize
    addEvent(window, 'resize', resizeFrame);

    var iframeCheckInterval = window.setInterval(function () {
        maxFrameLoadedTries--;
        var frames = document.getElementsByTagName('iframe');
        if (maxFrameLoadedTries == 0 || frames.length) {
            clearInterval(iframeCheckInterval);
            frame = frames[0];
            addEvent(frame, 'load', resizeFrame);
            var resizeCheckInterval = setInterval(function () {
                resizeFrame();
                maxResizeCheckTries--;
                if (maxResizeCheckTries == 0) {
                    clearInterval(resizeCheckInterval);
                }
            }, 1000);
            resizeFrame();
        }
    }, 500);

    function resizeFrame() {
        if (frame) {
            var frameHeight = frame.contentWindow.document.body.scrollHeight;
            if (frameHeight !== lastKnownFrameHeight) {
                lastKnownFrameHeight = frameHeight;

                var viewportWidth = document.documentElement.clientWidth;
                if (document.compatMode && document.compatMode === 'BackCompat') {
                    viewportWidth = document.body.clientWidth;
                }

                frame.setAttribute('width', viewportWidth);
                frame.setAttribute('height', lastKnownFrameHeight);

                frame.style.width = viewportWidth + 'px';
                frame.style.height = frameHeight + 'px';
            }
        }
    }

    //--------------------------------------------------------------
    //  Cross-browser helpers
    //--------------------------------------------------------------

    function addEvent(elem, event, fn) {
        if (elem.addEventListener) {
            elem.addEventListener(event, fn, false);
        } else {
            elem.attachEvent("on" + event, function () {
                return (fn.call(elem, window.event));
            });
        }
    }

})(window);


功能是不言自明的,并有评论以进一步解释其目的。

评论


可能需要一些解释,至少如何使用它。及其作用。 (-1)

–ctrl-alt-delor
16年1月3日,16:02

这在FF上对我有用,但是我同意@richard的观点,即某种解释将有助于使该问题得到解答。

–crafter
17年4月18日在15:08



有...。1条评论,关于显而易见的事情。我不明白的实际东西没有评论。没有提及这是否受到SOP的影响。最糟糕的是,它使用setTimeout-假设我的连接速度非常慢...

– RozzA
17-10-6在4:01



#16 楼

<script type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = 0;
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>


不适用于Chrome。但是为Firefox工作。

#17 楼

此选项将100%起作用

<iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>


评论


@all,如果它对您不起作用,请发表评论,而不是将其标记为否,因为它可以在许多网站上使用。

– Vijay Chouhan
15年7月30日在12:47

这一切都是为了制作全屏iframe,这绝对不是大多数人想要的。这也违反了HTML5规范,HTML5规范要求iframe的高度和宽度必须以像素为单位,而不是以百分比为单位(但是,百分比对于HTML 4.01来说是完全可以的)。参见developer.mozilla.org/en/docs/Web/HTML/Element/iframe

–迈克
2015年10月9日下午4:27

到目前为止((某种)工作)中唯一的一项。它固定了高度,但将其推向右侧以覆盖我的右侧栏。 (即使删除了宽度的内容)

–ctrl-alt-delor
16年1月3日,16:09

它阻止了该iframe背后的点击

–URL87
17-10-23在10:32