jQuery.contents() 给出了一个奇怪的结果

Posted 2023-02-22

【中文标题】jQuery.contents() 给出了一个奇怪的结果

【英文标题】：jQuery.contents() Gives a strange result

【发布时间】：2013-12-19 07:07:42

【问题描述】：

我在使用IFrame 和jQuery.Contents 时遇到了一个非常奇怪的情况。

我们有许多内置在单独页面中的报告，以及一个使用 jQuery 选项卡同时显示多个此类页面的显示页面。

这些报告的大小根据数据和用户输入的不同而不同，因为它们可以变化，我们需要动态地将 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 函数的工作原理？ 如果这样不起作用，是否有更好的方法来获取内容高度？ （我试过 body 的高度 + form 对象的高度，但这在 IE 中不起作用）。

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

【问题讨论】：

这个demo 工作正常.. 与您的示例的唯一区别是内容不会尝试调整到高度（就像 fiddle.jshell.net 一样.. 和还有调整元素大小等的脚本。)

@GabyakaG.Petrioli - 感谢您的提琴，您将我引向为什么它继续增长的问题（这是因为+=50）。但是，您的解决方案没有考虑到回发后内容可以改变高度。这是更新后的jsFiddle 内容更改，如果您单击链接“此链接到更小的内容”，即使内容更少，记录的高度值仍然相同。

刚刚添加了答案.. 我认为最安全的是定位iframe 的contentDocument.documentElement 并使用outerHeight(true) 来考虑可能存在的边距/填充..

【参考方案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/的演示

【讨论】：

谢谢你，你的小提琴完全按照你的预期工作，但是在我的实际网站上这不起作用。我在示例中使用的是一个简单的 ASP.NET 网页，并且我在回发时绑定了一个 GridView。每次回发时框架的高度都不会变小:(。这真是令人困惑......

感谢您的帮助，您带领我找到了解决此问题的正确路径，解决方案是用<div></div> 包装子页面中的所有内容并找到 div 的高度：var iframeHeight = $(this).contents().find('#ReportContent').outerHeight(true) + 50;

好主意..div 永远不会（单独）扩展超过其内容...很高兴我能提供帮助..

【参考方案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

中的问题都可以正常工作