この以前の記事「コンテンツに基づいて iframe のサイズを変更する」で説明されているソリューションを実装しましたが、ほとんど問題なく動作していますが、完全ではありません。
私が得ている問題は、高さを正しく計算することもあれば、計算が短すぎてコンテンツが切り落とされることもあります。
他の誰もが成功しているように見えるので、これを引き起こす原因についていくつかの提案を探しています。高さが正しく計算されない場合、外部ソースから iFrame にすべてのデータがロードされる前に計算が行われている可能性があります。しかし、それは推測であり、私は決して JS の専門家ではありません。
外部ページの読み込みが完了した後に計算が行われるようにするためにできることはありますか?
問題は、iFrame のコンテンツが変更されていることを検出してから、iFrame のサイズを再度変更する必要があることだと思います。最新のブラウザーでは、mutationObserver を使用してこれを行うことができますが、IE10 未満では機能しないため、フェイルバックを使用してこれを回避する必要があります。
これらすべての問題を処理し、iFrame のサイズをそのコンテンツに合わせて保持する小さなライブラリを作成しました。最新のブラウザと IE8 以上で動作します。
高さを正しく計算することはほとんど不可能です。私はかなり長い間それで遊んできました。私が経験したことの 1 つは、iframe 内にフォームがあり、フォームにエラー処理イベントがある場合です。非表示の行などを含むフォームにテーブルがあるとします。エラーが表示されると、行が表示され始めるとテーブルが「高く」なるため、高さの範囲が再び異なります。iframe 内でポストバックが行われる場合は常に、高さを制御できません。そこに投稿されたすべてのソリューションを試してみましたが、正しく計算できませんでした。「最高」の高さを推定し、その高さになるようにハードコーディングする必要がありました。