Question

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

frame.contentDocument.body.scrollWidth

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

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

Answer 1

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

这是 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元素的宽度，问题的一部分可能是html或body标记加载到iframe的文档包含margins或paddings。

修改

我已经多了一点，我可以获得你在Firefox和Chrome中所描述的确切行为。如果我在阅读width之前未将iframe的{{1}}设置为0px，则会发生这种情况，当前加载的文档的宽度小于之前加载的文档，我在scrollWidth上设置了overflow: visible。看一下 here 的行为示例。（只要iframe设置为scrolling而yes设置为overflow，就会在Chrome和Firefox中发生。

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

结论：明确的解决方法是将iframe的{{1}}设置为width（或任何小于或等于在阅读width的{{1}}之前，将会加载<{1}}文档的iframe，这应该在加载新文档之后发生。

Answer 2

尝试使用contentWindow代替contentDocument。

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

2 个答案: