例如:
<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>
我希望它能够根据里面的内容来调整它的高度,而不使用滚动。
当前回答
我是用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';
};
其他回答
我是用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';
};
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
这是不工作的chrome。但是在firefox上工作。
jQuery的.contents()方法允许我们在DOM树中搜索元素的直接子元素。
jQuery:
$('iframe').height( $('iframe').contents().outerHeight() );
记住,在iframe内的页面主体必须有它的高度
CSS:
body {
height: auto;
overflow: auto
}
这对我来说很有效(大多数情况下)。
把这个放在你的页面底部。
<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或其他类似的,您可以使用这个,但您必须设置类。也只能使用时,全高度是适当的。
注意:由于某些原因,当它在调整窗口大小后重新计算时,它得到了错误的高度。
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'>