使用IFramejQuery.Contents时出现非常奇怪的情况。

我们有许多报告都建立在单独的页面中,而显示页面则使用jQuery Tabs一次显示许多这些页面。

这些报告的大小取决于用户的数据和输入,因为它们可以变化,因此我们需要将IFrame的高度动态设置为内容的高度。为了获得内容的高度,我正在使用以下代码:

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


这段代码在首次加载时效果很好,但是在IFrame回发/刷新后,无论子页面的实际内容如何,​​记录的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中进行了测试

最佳答案

这是一个似乎可行的实现(用于扩展/缩小内容。)

假设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/上的演示

关于javascript - jQuery.contents()给出一个奇怪的结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20347540/

10-12 00:17
查看更多