让iframe根据内容自动调整高度而不使用滚动条?

例如:

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

我希望它能够根据其内容调整其高度,而不使用滚动。

添加到你的<head>部分:

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

并改变你的iframe到这个:

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

在javascript.bigresource.com上find

您可以使用这个库,这两个库最初都会正确调整您的iframe的大小,并通过检测iframe内容的大小(通过在setIntervalMutationObserver进行常规检查)并调整其大小来检测大小。

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

这适用于交叉和相同的域名内联框架。

hjpotter92的build议不适用于safari! 我已经对脚本做了一些小调整,现在它也可以在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 src="hello.html" onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"> </iframe> 

hjpotter92的答案在某些情况下工作得不错,但是我发现iframe的内容经常在Firefox和IE浏览器中被截断,而在Chrome浏览器中却很好。

以下工作适合我,并修复剪辑问题。 代码可以在http://www.dyn-web.com/tutorials/iframes/height/find。; 我做了一些修改,把onload属性从HTML中取出来。 将以下代码放在<iframe> HTML之后,并在closures</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>中,则可以恢复为在iframe HTML中使用inline onload属性,如在dyn-web网页中。

避免内联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'; }); 

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

jQuery的:

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

请记住,iframe内部的页面正文必须有其高度

CSS:

 body { height: auto; overflow: auto } 

这适用于我(也与一个页面上的多个iframe):

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

这对我(主要)有效。

把它放在页面的底部。

 <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 eg 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的时候工作。 第二部分将iframe设置为页面高度(不是内容高度),当iframe类是iframe_fullHeight 。 如果内容是PDF或其他类似内容,则可以使用此function,但必须设置该类。 也只能在满身高的时候使用。

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

 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')”

 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'> 

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

iFrame视图

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

主视图

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

(如果两个视图都在同一个域中,这只会起作用)

我是用AngularJS做的。 Angular没有ng-load,但是第三方模块被制作了; 用下面的bower安装,或者在这里find它: 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> 

控制器resizeIframefunction:

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

试试这个IE11

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

这个选项将100%

 <iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe> 
 <script type="text/javascript"> function resizeIframe(obj) { obj.style.height = 0; obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script> 

这不适用于铬。 但为Firefox工作。

我想让一个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); 

这些function是不言自明的,并有意见进一步解释其目的。