例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据里面的内容来调整它的高度,而不使用滚动。
例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据里面的内容来调整它的高度,而不使用滚动。
当前回答
这适用于我(也与多个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 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或其他类似的,您可以使用这个,但您必须设置类。也只能使用时,全高度是适当的。
注意:由于某些原因,当它在调整窗口大小后重新计算时,它得到了错误的高度。
我是用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';
};
避免使用内联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';
});
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
这是不工作的chrome。但是在firefox上工作。
以下是精简版:
<iframe src="hello.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>