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

例如:

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

我希望它能够根据里面的内容来调整它的高度，而不使用滚动。

1394610 次浏览
小开
最佳答案

添加到你的<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)" />

在sitepoint讨论上找到。

小开

建议hjpotter92不工作在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>
小开 
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”)" < / p >
小开

您可以使用这个库，它既能正确地调整iframe的初始大小，也能通过检测iframe内容的大小变化(通过常规检查setInterval或MutationObserver)并调整它来保持它的正确大小。

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

他们也是一个React版本。

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

这适用于交叉和相同域的iframe。

小开

我在过去调用iframe时遇到过问题。onload用于动态创建iframe，所以我用这种方法来设置iframe大小:

iFrame视图

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

主要的观点

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

(这只会工作，如果两个视图在同一个域)

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

这是不工作的chrome。但是在firefox上工作。

小开

我是用AngularJS做的。Angular没有ng-load，但是创建了一个第三方模块;安装下面的凉亭，或在这里找到它: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>

控制器resizeIframe功能:

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

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

jQuery:

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

记住，在iframe内的页面主体必须有它的高度

CSS:

body {
height: auto;
overflow: auto
}
小开 
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在一个页面):

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

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>

注意，如果你更喜欢在文档的<head>中包含Javascript，那么你可以恢复到在iframe HTML中使用内联的onload属性，就像在dyn-web网页中一样。

小开

以下是精简版:

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

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

这些函数是不言自明的，并且有注释来进一步解释它们的目的。

小开

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

在IE11上试试这个

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

这对我来说很有效(大多数情况下)。

把这个放在你的页面底部。

<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或其他类似的，您可以使用这个，但您必须设置类。

.

.

注意:由于某些原因，当它在调整窗口大小后重新计算时，它得到了错误的高度。


提交答案