インラインフレーム(iframe)の枠を表示される内容によってサイズ変更するように出来ますか?スクロールバーは常に非表示が条件です。

回答の条件
  • 1人1回まで
  • 登録:2007/03/04 20:06:30
  • 終了:2007/03/09 20:55:49

回答(2件)

id:Yukari_beauty No.1

Yukari_beauty回答回数41ベストアンサー獲得回数42007/03/04 23:23:53

ポイント10pt

こんばんわ。

インラインフレームの表示は結構わかりやすいので

下記に設定方法書きますね。

<IFRAME name="list" width="★" height="★" src="http://~" align="center" border="0" leftmargin="0" topmargin="0"></IFRAME>

組み込むHTMLページのサイズに合わせて★の調整されるといいですね。

id:webmaster55

質問の仕方が悪かったようです。

フレームの枠内のページサイズによって自動的にフレームサイズが変わるような仕組みが知りたいです。

2007/03/06 23:44:45
id:Mug No.2

Mug回答回数15ベストアンサー獲得回数32007/03/09 10:19:47

ポイント60pt

3年くらい前に作っていたものがありました。

そのままサンプルとしてもって来ました。(変数名は置換しましたが)

◆親HTML◆

<iframe id="RenewalFrame" name="RenewalFrame" height="0" src="about:blank" frameborder="0" style="width:100%;margin-top:16px;"></iframe>

◆子HTML(JavaScript)◆

function RemakeFrameHeight() {

  if(parent && (parent != self) && ParentIframeId && parent.document.getElementById(ParentIframeId)) {

    if(document.all) {

      parent.document.getElementById(ParentIframeId).height = (document.body.scrollHeight + 2);

    } else {

      parent.document.getElementById(ParentIframeId).height = (document.body.offsetHeight + 2);

    }

  }

}

動きとしては、子HTMLのonloadでRemakeFrameHeight();を実行していました。そのときには変数ParentIframeIdには"RenewalFrame"が入っていたはずです。



親と子の表示されるページがN:1または1:Nの場合は、1の側にiframeのリサイズ関数を用意すると便利です。

どちらに作るにしろ、子がonloadしたときに子のサイズを測って、親のiframeのサイズを(若干の余裕をみて)変更します。

また、動的に変更したいのは横幅か高さか(両方か)、どの程度サイズに余裕をみるか、などによって値の決め方(元ネタ・取得方法・計算方法・代入先)が異なってくるでしょう。

このご質問では、そこまではわからなかったので、とりあえず方針としてはこれでできるはずです。


※上記は親:子=N:1であり、かつ高さのみ変更したかったケースでした。

id:webmaster55

探していた答えに近いと思います。試してみます!ありがとうございました。

2007/03/09 20:36:03
  • id:Mug
    私の場合は「更新履歴」でした。だから"Renewal"が付いてます。
    この上記の回答の補足ですが、下記の注意点・ポイントがありました。

    1.ブラウザによって子HTMLの中のbodyの幅と高さの求め方が違う。
     →offset***か、scroll***か。
    2.親HTMLのiframeを、子HTMLのbodyの幅や高さぴったりにしても、スクロールバーが出ることがある。
     →いくらかの余裕を持たせます。
    3.ウィンドウのサイズ変更にも対応する必要があるかも。
     →子HTMLのbodyのサイズがウィンドウのサイズに左右される場合、window.resizeでiframeのリサイズをやり直す必要が出てくるかもしれません。
    4.親HTMLで子HTMLのonloadを知るには、iframeのonload属性が有効です。
     →あまり知られていない(ウェブや書籍で見たことがない)情報です。

    以上、がんばってください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません