获取 jQuery 标签内的 iframe 高度 returns 0

Question

我在 jQuery 选项卡中有多个 iframe，但它们不在活动选项卡中。每个选项卡都包含一个 iframe。我正在尝试获取 iframe 内容的高度以扩展 iframe 高度。问题是如果 iframe 位于选项卡内，函数会发出 0 警报，但如果 iframe 直接位于页面正文中，则可以正常工作。这是 iframe 代码

<div id="discussion">
    <iframe src="page path here" id="myFrame" style="width: 90%; 
     float: right;border: 0;" onload="calcHeight()"></iframe>
</div>

和函数

function calcHeight(){
    var the_height=document.getElementById('myFrame')
        .contentWindow.document.body.scrollHeight;
    document.getElementById('myFrame').height=the_height;
    $("#myFrame").css("height",the_height);
    alert(the_height);
}

Answer 1

加载选项卡后，您可以使用 jQueryUI 的回调获取 iframe 高度：

$( ".selector" ).tabs({
    activate: function( event, ui ) {
        calcHeight();
    }
});

http://api.jqueryui.com/tabs/#event-activate

获取 jQuery 标签内的 iframe 高度 returns 0

getting iframe height inside jQuery tabs returns 0

iframe

jquery

height

tabs