首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jquery在加载时获取iframe内容的高度

jquery在加载时获取iframe内容的高度
EN

Stack Overflow用户
提问于 2010-10-02 22:22:55
回答 9查看 289.4K关注 0票数 89

我有一个帮助页面,help.php,我是在main.php的iframe中加载的,一旦加载到iframe中,我如何获得此页面的高度?

我之所以这样问,是因为我不能将to iframe的高度设置为100%或auto。这就是为什么我认为我需要使用javascript..我正在使用jQuery

CSS:

代码语言:javascript
复制
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:

代码语言:javascript
复制
$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

代码语言:javascript
复制
<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>
EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2010-10-04 05:04:52

好了,我终于找到了一个好的解决方案:

代码语言:javascript
复制
$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

因为一些浏览器(旧的Safari和Opera)在CSS呈现之前报告onload已经完成,所以您需要设置一个微超时和消隐,并重新分配iframe的src。

代码语言:javascript
复制
$('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';
}
票数 105
EN

Stack Overflow用户

发布于 2014-09-11 14:09:13

我发现以下代码在Chrome、火狐和IE11上都能用:

代码语言:javascript
复制
$('iframe').load(function () {
    $('iframe').height($('iframe').contents().height());
});

当Iframes内容加载完成后,将触发事件,并将IFrames高度设置为其内容的高度。这将仅适用于与IFrame相同域中的页面。

票数 24
EN

Stack Overflow用户

发布于 2016-09-02 22:51:00

如今,在没有jQuery的情况下实现这一点的代码很简单:

代码语言:javascript
复制
const frame = document.querySelector('iframe')
function syncHeight() {
  this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)

要取消与事件的关联,请执行以下操作:

代码语言:javascript
复制
frame.removeEventListener('load', syncHeight)
票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3846132

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档