5

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

frame.contentDocument.body.scrollWidth

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

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

4

2 回答 2

2

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

这是一个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，您的问题的一部分可能是文档上的htmlorbody标记被加载到iframehavemargins或paddingsset 中。

编辑：

我做了更多的尝试，我可以得到你所描述的在 Firefox 和 Chrome 中发生的确切行为。如果我在读取之前没有将width的设置iframe为，则当前加载的文档的宽度小于之前加载的文档的宽度，并且我设置了. 看看行为的一个例子。（它发生在 Chrome 和 Firefox 中，只要设置为和设置为）。0pxscrollWidthoverflow: visibleiframeherescrollingyesoverflowvisible

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

结论：一个明确的解决方法是在读取 的 之前将 的设置为width（或任何小于或等于将要加载的文档的） ，这应该在加载新文档之后发生。iframe0pxminimum widthscrollWidthiframe

于 2013-05-03T00:21:39.740 回答
0

尝试使用contentWindow而不是contentDocument.

于 2013-05-02T21:28:53.187 回答