在 FireFox 的 iFrame 中显示内容时的 jQuery 高度问题

Posted 2023-05-09

【中文标题】在 FireFox 的 iFrame 中显示内容时的 jQuery 高度问题

【英文标题】：jQuery height issues when content is displayed in an iFrame in FireFox

【发布时间】：2012-07-09 21:46:27

【问题描述】：

我正在制定一个日历/时间表，它需要休息时间才能跨越包含事件的整个高度。下面的代码在 FF/Chrome 和 IE 中运行良好。在 Firefox 中通过 iFrame 加载内容时会出现问题，高度始终设置为零。只有重新加载 iFrame 时，页面才会正确显示。

here is DEMO

$(window).load(function () 
    $(".event").each(function () 
        var height = $(this).height();
        $(".note, .break").each(function () 
            $(this).height(height);
        );
    );
)

我正在为 FF 寻找一致的解决方案或解决方法，以便在 iFrame 的首次加载时正确应用高度。

提前致谢。

【问题讨论】：

我在jsFiddle上添加了一个例子jsfiddle.net/fBTeg/3

【参考方案1】：

方式 1：用 div 包裹你的 iframe 得到 float:left;并在fireforx上计算div的高度。

尝试计算这个 div 的高度，而不是 iframe 的..

<div style="float:left">
    <iframe></iframe>
</div>

.load() usage

方式2：

$(document).ready(function () //if u wont define more specific element, use docment ready
    $(".event").each(function () 
        var height = $(this).height();
        $(".note, .break").each(function () 
            $(this).css('height':height+'px');//to change css height
            //$(this).attr('height',height);//to change inline attr height
        );
    );
)

【讨论】：

我之前使用的是准备好的文档并更改为 load() 事件以防出现时间问题。不幸的是，您的解决方案与我已经遇到的结果相同。

你试过用 div 包裹你的 iframe 吗？并在fireforx上计算div的高度？

问题不在于 iFrame 高度，问题在于加载到 iFrame 中的页面，并且仅当它显示在 iFrame 中时。我添加了一个在 iFrame 中显示的页面示例（参见上面的 OP）。

jsfiddle.net/fBTeg/6 它提醒不同的值，我也检查了 firefox，相同的变量 72 96 169，你不能给高度不同的值，

它会做的，这是正确的，那里有 3 个事件，所以你通过添加警报获得 3 个高度。高度仅适用于每个 .event 内具有 .break 或 .note 类的元素。例如。事件 1 中断设置为第一个事件容器的高度。等等等等。