让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内容的大小（通过在setInterval或MutationObserver进行常规检查）并调整其大小来检测大小。
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是不言自明的，并有意见进一步解释其目的。
