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

Question

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

frame.contentDocument.body.scrollWidth

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

我用Google搜索并搜索了Stack Overflow.我发现的一些建议与显示和溢出CSS属性有关.我对CSS进行了更改,但没有帮助.我也试过FF 21 Beta,希望它能在那里修复,但事实并非如此.

Answer 1

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

这是一个jsFiddle. 其中有一些用于测试和演示目的的随机化代码，对您来说唯一重要的是：

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

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

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

编辑：

我进行了更多尝试，我可以得到您所描述的在 Firefox 和 Chrome 中发生的确切行为。如果我在读取之前没有设置 ，就会出现这种情况width，iframe当前加载的文档的宽度小于之前加载的文档的宽度，并且我已经在. 查看该行为的示例。（在 Chrome 和 Firefox 中都会发生这种情况，只要设置为和设置为）。0pxscrollWidthoverflow: visibleiframeherescrollingyesoverflowvisible

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

结论：最终的修复方法是在读取 之前将 的设定为width（或任何小于或等于将加载的文档的），这应该在加载新文档之后发生。iframe0pxminimum widthscrollWidthiframe