Question

使用IFrame和jQuery.Contents时，我发现非常奇怪。

我们有许多报告是在单独的页面中构建的，还有一个显示页面，它使用jQuery Tabs一次显示多个这些页面。

这些报告根据数据和用户的输入而有不同的大小，因为它们可以变化，我们需要将IFrame的高度动态设置为内容的高度。为了获得内容的高度，我使用以下代码：

    var iframeHeight = $(this).contents().height();
    iframeHeight += 50;
    console.log(iframeHeight);

此代码在首次加载时工作正常，但在IFrame Postsback / Refreshes之后，记录的iframeHeight始终比前一个高度83px多，无论子页面的实际内容如何。

i.e. First report is 500px high, 
     Second report should be 300px high 
     but $(this).contents().height(); returns 583px.

以下是演示此问题的示例jsFiddle。如果您打开控制台，然后点击IFrame左上角的JSFiddle图标，您会发现记录的高度比前一个高83px。

有什么能解释这个问题吗？
我想念 - 了解jQuery.Contents功能如何运作？
如果这不起作用，有没有更好的方法来获得内容高度？（我已经尝试了身体的高度+ form对象的高度，但这在IE中不起作用。）

在IE10 + Chrome版本31.0.1650.57 m中进行了测试

Answer 1

这是一个似乎有效的实现（用于扩展/缩小内容.. ）

假设iframe的src来自同一个域，并且没有脚本在加载后调整iframe内容的大小

$(document).ready(function() {
    $('#frameID').on('load', function () {
        $('#ReportBuild').hide()
        $(this).show();

        var iframeHeight = $(this.contentDocument.documentElement).outerHeight(true);
        $(this).css({ height: iframeHeight + 'px' });

        this.contentWindow.onbeforeunload = function () {
            $('.tabFrame').hide();
            $('#ReportBuild').show();
        }
    });
});

http://jsfiddle.net/rq5S5/8/

演示

Answer 2

在帮助下我终于找到了一个解决方案，建议的示例在JSFiddle上运行但在使用PostBack上生成的ASP.NET控件应用于我的问题时无效。

为了解决这个问题，我在每个子页面上都将整个内容包装在<div></div>内并检索了该元素的高度。

示例：

<div id="ReportContent">
    <!-- HTML Content -->
</div>

和jQuery代码：

var iframeHeight = $(this).contents().find('#ReportContent').outerHeight(true);

现在，对于 IE10 和 Google Chrome版本31.0.1650.57 m

中的问题，此功能正常运行

jQuery.contents（）给出了一个奇怪的结果

2 个答案: