FF/IEのiframeに一貫性のないスクロール幅

Question

私のページにiframeがあります。その内容は、ページの本体のリンクをクリックすると変更されます。私はそうのように、内容を一致させるためにはiframeの幅を変更しようとしています：

frame.contentDocument.body.scrollWidth 

これは、Chromeで正常に動作しますが、FirefoxとIEで、私は新しいリンクがクリックされるたびに縮小インラインフレームを取得します。 FFは1回のクリックあたり20-37ピクセルを減じているようです。

私はグーグルとスタックオーバーフローを検索しました。一部のsuggestionsは、表示とオーバーフローのCSSプロパティに関連していました。私はCSSに変更を加えましたが、それは役に立たなかった。私はFF 21 Betaをそこに固定したいと考えても試みましたが、そうではありません。

Answer 1

あなたはjsFiddleを提供していないので、私はあなたが間違っているかもしれないとは言えませんが、私はあなたが何を記述しようとしています。あなたが経験しているのと同じ問題。あなたが言及したすべてのブラウザで正常に動作するようです。ただし、scrollWidthを取得しようとするときにiframeのドキュメントがロードされ、scrollWidthが取得される前にiframeの幅が0pxにリセットされていることを確認してください。これは、以前にロードされたドキュメントが新しくロードされたドキュメントよりも広い場合でも、scrollWidthがドキュメントの幅を保持するようにするためです（scrollWidthは、iframeの中の前のドキュメントの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.body.scrollWidthの代わりにframe.contentDocument.documentElement.scrollWidthを使用しています。これにより、body要素の代わりにhtml要素の幅が確保されます。iframeにロードされている文書のhtmlまたはbodyタグがmarginsまたはpaddingsに設定されている可能性があります。

編集：私は少し行くのより持っていた

I あなたは、FirefoxとChromeでの両方で起こることを記述している正確な動作を得ることができます。 scrollWidthを読む前にiframeのwidthを0pxに設定しないと、現在読み込まれているドキュメントの幅が以前に読み込まれたドキュメントの幅より小さくなり、iframeにoverflow: visibleが設定されます。この現象の例は、hereです。 （scrollingがyesに設定され、overflowがvisibleに設定されている限り、ChromeとFirefoxの両方で発生します）。

私がiframeのwidthをリセットしない場合は、scrollWidthは以前にロードされた文書のwidthの値がマイナス垂直スクロールバーの幅を保持しているようです。したがって、widthをscrollWidthに設定したままにすると、そのたびに、新しく読み込まれたドキュメントが以前のドキュメントよりも小さい場合、iframeのwidthは、垂直スクロールのwidthに等しいピクセル分だけ減少しますバー。

結論：は決定的な修正がiframeのscrollWidthを読む前にiframe0pxへのwidth（またはをロードされる文書のminimum width以下のもの）を設定することであろう、新しい文書がロードされた後に起こるはずです。

Answer 2

contentDocumentの代わりにcontentWindowを試してみてください。