例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据其中的内容调整高度,而无需使用滚动键。
#1 楼
将此添加到您的<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)" />
在现场讨论中。
评论
如果由于相同的原产地政策,如果iframe包含来自其他域的内容,则此方法将不起作用,SO上还有另一个问题,其中包含一些跨域解决方案stackoverflow.com/questions/5589756/…
–加科
13年3月27日在12:13
如果iframe的内容的高度因js而变化(例如,滑块),则该解决方案似乎不起作用
– shababhsiddique
13-10-20在4:59
应该是onload =“ resizeIframe(this);” :)
–rationalboss
2013年12月20日12:40
它们是您还需要考虑的其他一些问题,iframe中的内容更改,浏览器被调整大小,当您第一次检查iframe并跨域时iframe没有完全加载。我整理了一个小图书馆,因为找不到适合所有问题的解决方案。 github.com/davidjbradshaw/iframe-resizer
–大卫·布拉德肖(David Bradshaw)
2014年3月23日13:17在
如果iframe的内容在加载后增加高度,则可能需要将滚动更改为自动。
–rybo111
15年11月29日在17:03
#2 楼
您可以使用此库,该库最初可以正确调整iframe的大小,还可以通过检测iframe内容的大小是否发生变化(通过定期检查setInterval
或MutationObserver
)并调整大小来保持其正确大小。 > https://github.com/davidjbradshaw/iframe-resizer
它们也是React版本。
https://github.com/davidjbradshaw / iframe-resizer-react
这适用于跨域和相同域的iframe。
评论
这是迄今为止最可靠的解决方案。
–brockis
18 Mar 15 '18 at 0:41
注意:用于跨网域时,要求您能够将js文件注入到iframe中...如果您不控制iframe源,这似乎不是一个可行的选择。
–凯尔·贝克(Kyle Baker)
18年3月28日在6:00
该库中的一个主要错误是它无法处理vh。
–RickardElimää
19年7月15日在7:59
@RickardElimää很乐意接受PR修复vh。
–大卫·布拉德肖(David Bradshaw)
19年12月1日在18:49
对我来说没有用
– Michael-woreda-net
5月4日16:07
#3 楼
这是精简版:<iframe src="hello.html" sandbox="allow-same-origin"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';">
</iframe>
评论
我没有在其他浏览器上尝试过此操作,但我需要在Chrome中添加10px像素,否则将显示垂直滚动条。我做了this.style.height =(this.contentDocument.body.scrollHeight + 15)+'px';只是为了确保它看起来还可以。
–迈克
2015年10月9日在4:43
此解决方案添加“ max-height:400px!important;”来固定最大高度对于我的情况而言是完美的。
– Yazid Erman
16年1月26日在6:49
它应该是onload =“ this.style.height = this.contentWindow.document.body.scrollHeight +'px';”
–mok
18/12/25在9:17
两者都会做。试试看。
–崇立彭彭
18/12/26在1:59
无法正常工作。.阻止访问源为“ {url}”的框架的跨源框架。
– Arjun
19-10-7在8:53
#4 楼
hjpotter92的建议在野生动物园中不起作用!我对该脚本进行了小幅调整,因此现在也可以在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内容来自srcdoc属性,这也将不起作用。高度将设置错误。
– Myforwik
2014年7月14日在1:04
首先将高度设置为零不仅适用于IE。
–黑桃
2014年9月6日下午16:46
谢谢,这可能应该是对hjpotter的后记的评论/建议。
–ᴍᴀᴛᴛʙᴀᴋᴇʀ
2015年2月25日在15:38
您不需要封装{}的
–史蒂文·瓦雄
15年3月9日在21:30
obj.style.height = 0;是非常重要的一行,这会导致scrollHeight重新计算(否则,contentWindow的高度只会增加)。
–马克西姆·朱可夫(Maxim Zhukov)
16年5月17日在16:16
#5 楼
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>
请注意,如果您希望将Javascript包含在文档的
<head>
中,则可以还原为在onload
HTML中使用内联iframe
属性,如dyn-web网页中一样。评论
这是唯一为我工作的人。非常感谢!
–雅瑟·贾鲁夫(Yasser Jarouf)
18年7月7日在19:48
#6 楼
避免使用内联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';
});
#7 楼
jQuery的.contents()方法方法允许我们搜索DOM树中元素的直接子代。$('iframe').height( $('iframe').contents().outerHeight() );
请记住,iframe内部页面的主体必须具有其高度
CSS:
body {
height: auto;
overflow: auto
}
评论
在您的答案中添加演示以使其更具价值。
–史蒂芬(Stephan)
15年3月22日在15:01
这对我有用,但仅在删除“ body”以使其contents()时有效
–Simon_Weaver
16年8月23日在6:19
与以前相同的问题,跨源不起作用
– Nuander
17年1月25日在22:56
jQuery('iframe')。height(jQuery('iframe')。contents()。find('body')。height());在iframe加载后为我工作
– Michael L Watson
17年9月9日在16:27
#8 楼
尝试在IE11上使用<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
评论
你为什么要为一个浏览器写东西?具有许多操作系统和许多浏览器的许多人都可以查看您的站点。
–ctrl-alt-delor
16年1月3日,15:57
作品! (在Chrome,Firefox,Safari,IE上)
– strix25
19年7月11日在12:16
#9 楼
这对我有用(也可以在一页上使用多个iframe):$('iframe').load(function(){$(this).height($(this).contents().outerHeight());});
#10 楼
将其放在页面底部。
<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或其他类似内容,则可以使用它,但是必须设置类。也只能在适合全高的情况下使用。注意:由于某些原因,当调整窗口大小后重新计算时,高度会出错。
#11 楼
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')”
#12 楼
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'>
#13 楼
我过去在为动态创建的iframe调用iframe.onload时遇到问题,所以我采用了这种方法来设置iframe大小:iFrame视图
var height = $("body").outerHeight();
parent.SetIFrameHeight(height);
主视图
SetIFrameHeight = function(height) {
$("#iFrameWrapper").height(height);
}
(这仅在两个视图位于同一域中时才起作用)
#14 楼
我是用AngularJS做到的。 Angular没有ng-load,但是制作了第3方模块;使用下面的Bower安装,或在此处找到它: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>
控制器调整大小iframe功能:
$scope.resizeIframe = function (event) {
console.log("iframe loaded!");
var iframe = event.target;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
#15 楼
我想让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);
功能是不言自明的,并有评论以进一步解释其目的。
评论
可能需要一些解释,至少如何使用它。及其作用。 (-1)
–ctrl-alt-delor
16年1月3日,16:02
这在FF上对我有用,但是我同意@richard的观点,即某种解释将有助于使该问题得到解答。
–crafter
17年4月18日在15:08
有...。1条评论,关于显而易见的事情。我不明白的实际东西没有评论。没有提及这是否受到SOP的影响。最糟糕的是,它使用setTimeout-假设我的连接速度非常慢...
– RozzA
17-10-6在4:01
#16 楼
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
不适用于Chrome。但是为Firefox工作。
#17 楼
此选项将100%起作用<iframe id='iframe2' src="url.com" frameborder="0" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>
评论
@all,如果它对您不起作用,请发表评论,而不是将其标记为否,因为它可以在许多网站上使用。
– Vijay Chouhan
15年7月30日在12:47
这一切都是为了制作全屏iframe,这绝对不是大多数人想要的。这也违反了HTML5规范,HTML5规范要求iframe的高度和宽度必须以像素为单位,而不是以百分比为单位(但是,百分比对于HTML 4.01来说是完全可以的)。参见developer.mozilla.org/en/docs/Web/HTML/Element/iframe
–迈克
2015年10月9日下午4:27
到目前为止((某种)工作)中唯一的一项。它固定了高度,但将其推向右侧以覆盖我的右侧栏。 (即使删除了宽度的内容)
–ctrl-alt-delor
16年1月3日,16:09
它阻止了该iframe背后的点击
–URL87
17-10-23在10:32
评论
这可以通过CSS来完成。css中有一个称为媒体查询的概念,其中根据屏幕尺寸调整内容的大小Angular iFrame自动高度:gitlab.com/reduardo7/angular-iframe-auto-height
“ Angular…”,即是否需要Javascript?换句话说,由于跨站点脚本限制,不能在跨站点iframe上执行此操作,对吗?正如@ clankill3r所暗示的,这表明需要一个纯CSS解决方案来解决这个问题!