iframe 调整大小在 Mozilla Firefox 中的第二次加载期间不起作用

Posted 2023-05-09

【中文标题】iframe 调整大小在 Mozilla Firefox 中的第二次加载期间不起作用

【英文标题】：Iframe resize not working during second load in Mozilla Firefox

【发布时间】：2012-09-11 10:24:53

【问题描述】：

IFrame 旨在根据其内容调整大小，它适用于大多数浏览器，但仅适用于 Mozilla Firefox，只有第一次加载有效，但之后的加载事件无效。

要让它再次工作，需要刷新页面或先清除浏览器的缓存..

代码如下：

function sizeIFrame() 
var subscriptionFrame = jQuery("#subscriptionFrame");
var innerDoc = (subscriptionFrame.get(0).contentDocument) ?subscriptionFrame.get(0).contentDocument : subscriptionFrame.get(0).contentWindow.document;
subscriptionFrame.height(innerDoc.body.scrollHeight);   

<iframe id="subscriptionFrame" onload="sizeIFrame();"></iframe>

有人知道这个吗？

【参考方案1】：

您可能遇到了 DOM 竞争条件，因为它在页面加载时间较长（无缓存）时听起来好像它可以工作，而在缓存填充后就不起作用。

尝试在onload 属性上使用jQuery 的load 或事件。 jQuery 在幕后处理特殊情况，因此它可能会有所帮助。

<iframe id="subscriptionFrame" onload="sizeIFrame();"></iframe>
<script type="text/javascript">
$('#subscriptionFrame').load(function()

    var subscriptionFrame = this;
    var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document;
    $(this).height(innerDoc.body.scrollHeight);    
);
</style>

【讨论】：

对不起，我不熟悉 DOM 竞争条件。它是一种 javascript 限制还是由编写 javascript 代码的不良做法引起的？我已经尝试过了，但它并没有真正起作用。 =(

两者都不是。它只是（在不知不觉中）依赖于网络操作的时间来正确成功的代码。但是，如果您说建议代码也不起作用，那可能只是 Firefox 中的一个错误。

是的，Firefox 中的 iframe 缓存问题存在一些问题，但其中一些被声明为“已修复”。尽管如此，我还是找不到适合我的情况的解决方案。无论如何，感谢您分享您的想法。

还有一点，第二次加载后连iframe对象都找不到了。

【参考方案2】：

已修复！解决方法如下：

function sizeIFrame() 
    var subscriptionFrame = jQuery("#subscriptionFrame");
    var innerDoc = (subscriptionFrame.get(0).contentDocument) ? subscriptionFrame.get(0).contentDocument : subscriptionFrame.get(0).contentWindow.document;
    if(innerDoc.body.scrollHeight==0)
        innerDoc.location.reload(true);
    subscriptionFrame.height(innerDoc.body.scrollHeight);   

这是因为 Firefox 从缓存而不是服务器加载 iframe 内容。所以 xxx.location.reload(true) 将强制 iframe 内容从缓存中加载。希望它可以帮助你们！ =)