インラインフレームのリンク先ページに対応した高さ可変の方法とは？

質問

• インラインフレームを使用したリンク先ページの高さ可変について解説します。
• 現在、特定の方法を使用して、リンク先ページの可変が可能になっています。
• しかし、他の場合と異なり、うまく可変できない場合があります。解決法についても詳しく説明します。

回答No.4

susie-t

うーむ。だめですか・・・。

>> 2)No2で提示したコードそのものはお使いの環境で動作しましたでしょうか？(こちらでは動作しています。)
> 2)リンク先にiframeが埋め込まれていなければ可変しました。
「コードそのもの」とはそのままそれぞれコピーして各ファイル(現在作成しておられるページに組み込むのではなくて、テスト用に作成したもの)に貼り付けて動作させてみるという意味ですが、認識あってますでしょうか。こちらではご提示されたのと同一の環境でローカル・WEBサーバ上共に動作しています。ここでいう「動作」はindex.htmのIFRAMEから赤・青のDIVが共に見える状態を指します。

> 3)ドメインというのは、借りたサーバーとかなのでしょうか。
http://oshiete1.goo.ne.jp/kotaeru_reply.php3?q=3668064 ならば oshiete1.goo.ne.jp の部分を指します(参考URL参照)。同一フォルダ上とのことなので問題ないようですね。違う階層でも問題ありません。

2)の意図が間違いなく伝わっているとすると、OS・ブラウザ・コードが同一なのに動作が違うことになり、ちょっとお手上げです・・・。

もし2)の認識が違うなら、他に考えられる原因として、main、またはそのIFRAMEのページで内容生成にスクリプトを使用している、というのが考えられるのですが。onloadのタイミングよりも後にページの描画が完了するため(読み込み完了(onload)と描画完了は別)、ページの高さが正しく取得できない、というものです。

私に分かるのはこのくらいです・・・。すみません。

参考URL：

http://www.next-web.ad.jp/theFirstTime/Hosting/dom.html

補足

えーっと、私の説明のほうで、不足している部分が判明しました。

2)の意図が勘違いしていましたので、テストページでためしました。
テストページはちゃんとできていました。
えっと、実はindex.htmlもテストページ同様にできていたんですよ。

できないのは、下記です。説明わかりにくいかもしれませんが・・・

index.htmlのiframe に main.html、
main.html のiframe に higu.html　　がまず入っています。
ここはまででは、しっかりと可変します。
しかし、
main.html内でリンクを作成して、main.htmlのiframe（higu.htmlが入っているiframe）にターゲットし、飛んだときに、
その先のリンク先がhigu.htmlの高さより高いのに、可変しない（高くならない）のです。

この状態で、main.htmlを単体（inde.htmlのiframeじゃなくアドレス直接入力）で見ると、しっかり可変していました。
なので、index.htmlが可変していないようです。

説明不十分で本当に申し訳ないです。解決策ありましたら教えてください。
もし、無理な事ならば、main.htmlのiframe内が、最初に表示しているページより高いページに（リンクによって）変わったとき、GetHeight（今回使用しているjs）を解除し、iframeタグに指定したheightを優先させることなんて出来ませんかね？
色々と申し訳ございませんが、協力おねがいします。