jquery 在加载时获取 iframe 内容的高度 [英] jquery get height of iframe content when loaded

问题描述

我有一个帮助页面 help.php，我正在 main.php 的 iframe 中加载它在 iframe 中加载此页面后，如何获取此页面的高度?

我问这个是因为我无法将 iframe 的高度设置为 100% 或自动.这就是为什么我认为我需要使用 javascript..我正在使用 jQuery

CSS:

body {边距:0；填充:0；}.容器 {宽度:900px；高度:100%；边距:0 自动；背景:银色；}.help-div {显示:无；宽度:850px；高度:100%；位置:绝对；顶部:100px；背景:橙色；}#帮助框架{宽度:100%；高度:自动；保证金:0;填充:0;}

JS:

$(document).ready(function () {$("a.open-help").click(function () {$(".help-div").show();返回假；})})

HTML:

<!-- -->
<p>这是一个带有 iframe 的 div，用于加载帮助页面</p><iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
<a class="open-help" href="#">在 iFrame 中打开帮助</a><p>你好世界</p><p>你好世界</p><p>你好世界</p><p>你好世界</p><p>你好世界</p>

解决方案

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

$('iframe').load(function() {this.style.height =this.contentWindow.document.body.offsetHeight + 'px';});

因为某些浏览器(旧版 Safari 和 Opera)在 CSS 呈现之前报告加载完成，您需要设置微超时并清空并重新分配 iframe 的 src.

$('iframe').load(function() {setTimeout(iResize, 50);//Safari 和 Opera 需要启动.var iSource = document.getElementById('your-iframe-id').src;document.getElementById('your-iframe-id').src = '';document.getElementById('your-iframe-id').src = iSource;});函数 iResize() {document.getElementById('your-iframe-id').style.height =document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';}

I have a Help page, help.php that I am loading inside an iframe in main.php How can I get the height of this page once it has loaded in the iframe?

I am asking this because I can't style the height of to iframe to 100% or auto. That's why I think I need to use javascript.. I am using 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>

解决方案

ok I finally found a good solution:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's 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';
}

这篇关于jquery 在加载时获取 iframe 内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！