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

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

frame.contentDocument.body.scrollWidth

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

---

我在谷歌上搜索过堆栈溢出。我发现一些与显示和溢出CSS属性有关。我对CSS进行了更改，但没有任何帮助。我还尝试了FF 21测试版，希望它能在那里得到修复，但事实并非如此。

尝试使用

contentWindow

而不是

contentDocument
既然您没有提供JSFIDLE，我无法告诉您可能做错了什么，但是我试着去做你所描述的事情，我真的没有经历过任何与你所经历的相同的问题。它似乎在您提到的所有浏览器中都能正常工作。前提是您确保在尝试获取
iframe
的
scrollWidth
时加载
iframe
中的文档，并在获取
scrollWidth
之前将
iframe
的宽度重置为
0px
。这是为了确保
scrollWidth
保持文档的宽度，即使以前加载的文档比新加载的文档宽（在这种情况下，
scrollWidth
将在
iframe
中保持以前文档的
宽度）

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

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
元素，问题的一部分可能是加载到
iframe
的文档上的
html
或
body
标记设置了
边距
或
填充

编辑：

我做了更多的尝试，我可以在Firefox和Chrome中获得您描述的确切行为。如果在读取
scrollWidth
之前未将
iframe
的
宽度设置为
0px
，则会发生这种情况，当前加载的文档的宽度小于先前加载的文档的宽度，并且在
iframe
上设置了
溢出：可见。看一看这种行为的例子。（只要
滚动
设置为
是
并且
溢出
设置为
可见，这种情况在Chrome和Firefox中都会发生）

似乎如果我不重置
iframe
的
width
，则
scrollWidth
将保留先前加载文档的
width
值减去垂直滚动条的宽度。因此，如果我每次都将
宽度设置为
滚动宽度
，并且新加载的文档比上一个文档小，则
iframe
的
宽度
减少的像素量等于垂直滚动条的
宽度

结论：一个确定的解决方案是在读取
iframe
的
滚动宽度之前，将
iframe
的
宽度设置为
0px
（或小于或等于将加载的文档的
最小宽度
），这应该在新文档加载后发生。
你能给出一个JSFIDLE示例吗？我实际上没有时间检查解决方案，但是你做了很多工作，所以我会给你奖金。一旦我能确认，我会把它标记为正确的。@CaptainThrowup-你确认了吗？