FF/IE 中 iframe 的滚动宽度不一致答案

【问题标题】：Inconsistent scrollwidth for iframe in FF/IEFF/IE 中 iframe 的滚动宽度不一致
【发布时间】：2013-04-12 05:29:33
【问题描述】：

我的页面中有一个 iframe，通过单击页面主体中的链接可以更改其内容。我正在尝试调整 iframe 的宽度以匹配内容，如下所示：

frame.contentDocument.body.scrollWidth

这在 Chrome 中运行良好，但在 Firefox 和 IE 中，每次单击新链接时，我都会得到一个缩小的 iframe。 FF 似乎每次点击都会减去 20-37px。

我已经用 Google 搜索过 Stack Overflow。我发现一些suggestions 与显示和溢出CSS 属性有关。我对 CSS 进行了更改，但没有帮助。我还尝试了 FF 21 Beta，希望它在那里得到修复，但事实并非如此。

【问题讨论】：

你能举个jsfiddle的例子吗？

标签： javascript firefox dom iframe

【解决方案1】：

由于您没有提供 jsFiddle，我无法告诉您您可能做错了什么，但我已经尝试过尝试做您所描述的事情，但我并没有真正遇到任何相同的情况您遇到的问题。它似乎在您提到的所有浏览器中都能正常工作。前提是您确保在尝试获取其scrollWidth 时已加载iframe 中的文档，并且在获取scrollWidth 之前将iframe 的宽度重置为0px。这是为了确保 scrollWidth 保持文档的宽度，即使之前加载的文档比新加载的文档宽（在这种情况下，scrollWidth 将在 @987654331 中保持之前文档的 width @)。

这是 jsFiddle。那里有一些用于测试和演示目的的随机化代码，对您来说重要的唯一位是：

var frame = document.getElementById("frame");

frame.onload = function () {
  $("#frame").css("width", '0px');
  $("#frame").css("width", frame.contentDocument.documentElement.scrollWidth + 'px');
}

我在这里使用了一些 jQuery 来让自己更轻松，但您可以将其替换为您已经拥有的任何代码来设置 iframe 的 width，而我正在使用 frame.contentDocument.documentElement.scrollWidth的frame.contentDocument.body.scrollWidth。这确保我得到html 元素的宽度而不是body 元素，您的问题的一部分可能是加载到@987654341 的文档上的html 或body 标签@有margins或paddings设置。

编辑：

我做了更多尝试，我可以得到您所描述的在 Firefox 和 Chrome 中发生的确切行为。如果我在读取scrollWidth之前没有将iframe的width设置为0px，则当前加载的文档的宽度小于之前加载的文档的宽度，并且我有@ 987654348@ 设置在iframe 上。查看 here 以获取行为示例。（只要将scrolling 设置为yes 并将overflow 设置为visible，它就会在Chrome 和Firefox 中发生。

看来，如果我不重置iframe 的width，scrollWidth 将保留先前加载的文档的width 的值减去垂直滚动条的宽度。那么，如果我一直将width 设置为scrollWidth，每次我这样做，并且新加载的文档比以前的文档小，iframe 的width 减少一个像素量等于垂直滚动条的width。

结论：最终的解决方法是将iframe 的width 设置为0px（或小于或等于文档的minimum width这将被加载）在读取iframe 的scrollWidth 之前，这应该在加载新文档之后发生。

【讨论】：

我实际上还没有时间检查解决方案，但是您付出了很多工作，所以我会给您赏金。我会在确认后将其标记为正确。
@CaptainThrowup - 你确认了吗？

【解决方案2】：

尝试使用contentWindow 而不是contentDocument。

【讨论】：