jquery在加载时获取iframe内容的高度
jquery在加载时获取iframe内容的高度
提问于 2010-10-02 22:22:55
我有一个帮助页面，help.php，我是在main.php的iframe中加载的，一旦加载到iframe中，我如何获得此页面的高度？
我之所以这样问，是因为我不能将to iframe的高度设置为100%或auto。这就是为什么我认为我需要使用javascript..我正在使用jQuery
CSS：
body {
margin: 0;
padding: 0;
}
.container {
width: 900px;
height: 100%;
margin: 0 auto;
background: silver;
}
.help-div {
display: none;
width: 850px;
height: 100%;
position: absolute;
top: 100px;
background: orange;
}
#help-frame {
width: 100%;
height: auto;
margin:0;
padding:0;
}JS：
$(document).ready(function () {
$("a.open-help").click(function () {
$(".help-div").show();
return false;
})
})HTML：
<div class='container'>
<!-- -->
<div class='help-div'>
<p>This is a div with an iframe loading the help page</p>
<iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
</div> <a class="open-help" href="#">open Help in iFrame</a>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>回答 9
Stack Overflow用户
回答已采纳
发布于 2010-10-04 05:04:52
好了，我终于找到了一个好的解决方案：
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});因为一些浏览器(旧的Safari和Opera)在CSS呈现之前报告onload已经完成，所以您需要设置一个微超时和消隐，并重新分配iframe的src。
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}Stack Overflow用户
发布于 2014-09-11 14:09:13
我发现以下代码在Chrome、火狐和IE11上都能用：
$('iframe').load(function () {
$('iframe').height($('iframe').contents().height());
});当Iframes内容加载完成后，将触发事件，并将IFrames高度设置为其内容的高度。这将仅适用于与IFrame相同域中的页面。
Stack Overflow用户
发布于 2016-09-02 22:51:00
如今，在没有jQuery的情况下实现这一点的代码很简单：
const frame = document.querySelector('iframe')
function syncHeight() {
this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)要取消与事件的关联，请执行以下操作：
frame.removeEventListener('load', syncHeight)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3846132
复制相关文章
相似问题
腾讯云开发者
