aka*_*hbc 475 html iframe height scrollbar
例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据其中的内容调整其高度,而不使用滚动.
hjp*_*r92 622
将其添加到您的<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)" />
如在sitepoint讨论中找到的那样.
use*_*310 87
您可以使用此库,它最初可以正确地调整iframe的大小,并通过检测iframe内容的大小(通过定期检查setInterval或通过MutationObserver)和调整大小来确保其大小合适.
https://github.com/davidjbradshaw/iframe-resizer
这适用于跨域和相同的域iframe.
Cho*_*ang 48
这是一个紧凑版本:
<iframe src="hello.html"
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
小智 41
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>
Jim*_*ine 14
hjpotter92的答案在某些情况下运行得很好,但我发现iframe内容经常在Firefox和IE中被截屏,而Chrome则很好.
以下适用于我并修复剪辑问题.该代码可在http://www.dyn-web.com/tutorials/iframes/height/找到.我做了一些修改,从HTML中获取了onload属性.将以下代码放在<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,则可以恢复使用HTML中的内联onload属性iframe,如dyn-web网页中所示.
ryb*_*111 12
避免使用内联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';
});
尝试这个：
<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
jQuery的.contents()方法方法允许我们搜索DOM树中元素的直接子元素.
jQuery的:
$('iframe').height( $('iframe').contents().outerHeight() );
请记住,iframe内部页面的主体必须具有高度
CSS:
body {
height: auto;
overflow: auto
}
| 归档时间： |
|
| 查看次数： |
1018319 次 |
| 最近记录： |