• ベストアンサー

<iframe>で読み込むページの高さを自動取得して、heigthに代入

一つ大きなフレームを <iframe name="disp" src = "" height=1000 width=1000 frameborder=0 scrolling=auto></iframe> とおいて、同一ページ内から<a href="test.html" target=disp> として、test.htmlが空白ページの<iframe>内に表示させるようにしたいのですがその都度、読み込むページの高さを自動取得して、heightとして自動的に適切な高さに変換するということはできいないでしょうか?

  • HTML
  • 回答数1
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • moveline
  • ベストアンサー率72% (35/48)
回答No.1

こういう場合にはJavaScriptを使うのが一番です。 まず、メモ帳に以下のものをコピー&ペーストしてください。 function iframeResize(){ var PageHight = document.body.scrollHeight + 30; // ページの高さを取得 window.parent.document.getElementById('disp').style.height = PageHight + 'px'; // iframeの高さを変更 } window.onload = iframeResize; そして、ファイル名は「~.js」となるように保存しておきます。 そのあとに、iframeで表示させたいHTMLファイルの<head>~</head>に <script src="~.js" type="text/javascript"></script> を追加してください。 「~.js」は先ほど保存したファイル名になります。 そして、<iframe>タグも以下のように変えておきます。 <iframe name="disp" id="disp" src="" height="1000" width="1000" frameborder="0" scrolling="auto"></iframe> こちらでも試してみましたが、動作しました。 ただ、JavaScriptがOFFの人はiframeの高さは変わりません。

negishi_ja
質問者

お礼

詳しい回答ありがとうございます 成功しました。ホントありがとうございました^^

関連するQ&A

  • <iframe>内をリロードするたびに入れ替えたい

    <iframe>で別に作ったページが表示されるようにしているのですが、 リロードするたびに<iframe>内のページがランダムに入れ替わり、 いろんなページが見られるようにしたいと思っています。 現在このようなソースでtest1.htmlを表示させているのですが、 ここにtest2.html、test3.html、test4.htmlが表示されるように するにはどうしたらいいでしょうか? <iframe src="../test1.html" name="sample" width="500" height="500" frameborder="0" scrolling=no> この部分はインラインフレームを使用しています。 </iframe>

    • ベストアンサー
    • HTML
  • iframeについて教えてください。

    ページ数が多く、一部変更するのにかなりの時間を要するので、ページ内のとある部分をフレーム対応に変更しました。 いろんなweb講座のページを見てそれらしきものを書き、一応見た目上は機能しているのですが、ちゃんとした意味がわからないので、詳しく知ってる方がいたら教えてください。 ■私が書いたもの <ILAYER CLIP="0,0,160,600" HEIGHT="600" WIDTH="160"> <LAYER HEIGHT="600" WIDTH="160" SRC="../etc/ad-love.htm"> <iframe src="../etc/info.html" name="sample" width="160" height="600" frameborder="0" scrolling=no> この部分はインラインフレームを使用しています。 </iframe> </LAYER> </LAYER> ◆縦600、横160というのを3回も書いてますが、こんなに必要なんでしょうか?本当は省略できるのに意味のない記述をしてるんでしょうか。 ◆この3回出てくる600,と300はすべて同じ部分をあらわしていますか? 例えば一番最初のはフレーム全体、次のはフレームの中の部分をあらわす、などのように微妙な違いがあるんでしょうか? わかりづらくてすみません。よろしくお願いします。

  • 複数のiframeの読み込みについて

    とある事情があり、制限がかなりある中、何とかiframeでやりくりをしていたのですが、 下記の通り(コード、画像参照)ページを組んだところ、 IE11、chrome34.0で確認をしたところ、下記の通り表示がおかしくなってしまいました。 制限が色々あるため、少しイレギュラーなコードの組み方をしており、どこが原因なのかがわからない状態です。 状況などをまとめましたので、お手数おかけいたしますがご教授いただけますでしょうか。 ■■■ページの概要について 恐らく下記のコードと添付の画像を見ていただいた方がわかりやすいと思いますが、制限や概要を記述しておきます。 ・表示させる方のページをA.html(親ページ)、iframe内で読み込むページをB.html(子フレーム)とします。 ・親ページの方にはかなり使用できるタグなどに制限があり、javascriptが使用できません。文字数にも制限があります(子フレームの方は自由です。) ・親ページも子フレームも触れるものの、この2ページは別ドメインです。(下記の例は相対パスで記述しています) ・子フレームの内容は、下記の例では内容が少ないですが、実際にはかなり長いページになります。ただ、ページは分けない方向でお願いします。 ・iframeはスクロールが出ないように高さを調節しています。 ・ページ内リンクを使用したいのですが、iframe内だけではなく、親ページから見た状態でページの途中に飛ばしたいため、  親ページの方にページ内リンク用のアンカーをつけ、複数のiframeで子フレームの内容を表示させています。 ・子フレームのコンテンツ毎にiframe表示用のアンカーをつけ、親ページで細かくiframeを分けて表示させています。 ・(ページ内リンクは親ページの方に記述することも出来ます。) ちなみに過去に次のような記事を見つけましたが、どちらも試すこともできない状態です。 http://okwave.jp/qa/q1105662.html http://okwave.jp/qa/q2938546.html ■■■表示のエラーについて(サーバ上でも、ローカルでも同じような状態です。) ・ページを読み込むと、一番上ではなく、一番下のiframeのところで止まります。  (⇒ページが読み込むと同時に一番上に行ってほしいです。) ・ページ内リンクを付けていますが、リンクを押しても該当のヶ所に飛ばず、  読み込むように少しページがぶれるのですが、元の位置のままです。 ・IE11のみですが、リンクで使用している画像がぼやけて表示されます。  (外部CSSで文字の背景に設定しています。) ■■■コードについて ◆A.html(親ページ) ※JSは使用不可です。 ※<body>は触れません。 ※B.htmlのページとは別ドメインです。 <!--ページ内リンク--> <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ここから#Baの内容--> <a name="linkAa" id="linkAa"></a> <iframe src="B.html#Ba" frameborder="0" width="850" height="580" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ページ内リンク--> <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ここから#Bbの内容--> <a name="linkAb" id="linkAb"></a> <iframe src="B.html#Bb" frameborder="0" width="850" height="595" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ページ内リンク--> <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ここから#Bcの内容--> <a name="linkAc" id="linkAc"></a> <iframe src="B.html#Bc" frameborder="0" width="850" height="565" marginwidth="0" marginheight="0" scrolling="no"></iframe> ◆B.html(子フレーム) ※JSは使用可です。 <div class="pageLink"> <a name="Blink" id="Blink"></a> <ul> <li><a href="A.html#linkAa" target="_top">#linkAaへリンク</a></li> <li><a href="A.html#linkAb" target="_top">#linkAbへリンク</a></li> <li><a href="A.html#linkAc" target="_top">#linkAcへリンク</a></li> </ul> </div> <a name="Ba" id="Ba"></a> <div>Baの内容</div> <a name="Bb" id="Bb"></a> <div>Bbの内容</div> <a name="Bc" id="Bc"></a> <div>Bcの内容</div> 以上です。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • iframeの中でページ内リンクはできますか?

    iframeを使って下記のようなつくりでHTMLを組んでみましたが、Chromeでリンクに飛ぶことができません。((1)をクリックすると(2)の位置に飛んでほしい) = A.html = <html> <body> <iframe src="B.html" scrolling="no" frameborder="0" width="750" height="2000"></iframe> </body> </html> = B.html = <html> <body> <a href="#CCC"><img src="xxx.jpg" /></a>…(1)   ・   ・   ・ <a href="C.html" name="CCC">あいうえお </a>…(2) </body> </html> ざっくりと書いてしまいましたが、親HTML(ここでいうA.html)では指示をせず、あくまでiframe中の子HTML(ここでいうB.html)の中でページ内リンクをしたいと思っています。 ちなみにiframeを使っていますが、ブラウザ上の見え方としては、A.htmlに1ページで組んでいるかのような形にしたいと思っています。 ネットでいろいろ調べてみましたがよくわからず、記述が悪いのか、Chromeではうまくいかないのか、悩んでおります。(Sarfari等、うまくいったブラウザもあるのですが…) よい方法がございましたら教えてください。 宜しくお願いします。

  • <iframe>内にHTMLをランダム表示するには?続きです。

    先日の<iframe>内にHTMLをランダム表示するには?の続きなのですが、 http://questionbox.msn.co.jp/qa2962976.htmlの疑問は 皆様のお力で解決しました。 誠にありがとうございました。 もう一つ教えて頂きたいことがあるのですが、 かなりの素人なので説明不足など分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeを配置し、 各iframeをランダムにしたいのです。 その際、各iframeは別々のフォルダーに収納されているhtmlを 表示するようにしたいです。 例えば、同じhtmlに iframe1、iframe2、iframe3があるとし、 01、02、03という3つのフォルダーの中に 01.html、02.html、03.htmlがそれぞれ収納されているとした場合、 iframe1は01のフォルダーの中のhtmlをランダムで表示し、 iframe2は02のフォルダーの中のhtmlをランダムで、 iframe3は03のフォルダーの中のhtmlをランダムで、 といったランダム表示にしたいです。 あまりの素人なので全く分かりませんので、 大変申し訳ありませんが、 多少いじってコピペするくらいまで完成されたソースを教えて頂けますでしょうか? 宜しくお願い致します。 ------------------------------------------------------------------------- 以下のソースは、 3つのiframeに同じフォルダー内のhtmlをランダムで表示させることができたソースです。 教えてもらいました。 こちらは参考までに載せました。_ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x1=Math.floor(Math.random()*n); x2=Math.floor(Math.random()*n); x3=Math.floor(Math.random()*n); s01.location.href = rlURL[x1]; s02.location.href = rlURL[x2]; s03.location.href = rlURL[x3]; } //--> </script> </head> <body onload="RndmSubFlame()"> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s03" scrolling="no"></iframe></td> </tr> </table> </body> </html> ------------------------------------------------------------------------- 以下のhtmlソースに書き加えてもらえると大変助かります。 何卒、宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="45%" height="448"> <tr> <td width="46%" height="210"><iframe src="01/01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="54%" height="442" rowspan="2"><iframe src="03/01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> <tr> <td width="46%" height="226"><iframe src="02/01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> </tr> </table> </body> </html>

  • iframeにリンクを貼る

    <iframe src="qqq.gif" height="150" width="356" align="left" frameborder="0" scrolling="no" marginheight="1" name="tv" > この部分はiframe表示です </iframe> にURLを指定してリンクを張りたいのですが、どうしたらいいですか?

  • インラインフレームの高さ

    IFRAMEの高さをIFRAME内のページに合わせて引き伸ばしたいのですが、そういうことが出来るのでしょうか。 <iframe src="URL" scrolling="no" frameborder="0" width="900" height="???"> 宜しくお願いします。

  • <iframe>内にHTMLをランダム表示するには?

    かなりの素人なので説明不足などで分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeがあるのですが、 その全てのiframeをランダムにしたいのですが、 あまりの素人なので全く分かりません。 申し訳ありませんが、 多少いじってコピペするくらいまでのソースを教えて頂けますでしょうか? 宜しくお願い致します。 iframe一つだけのランダムは以下のソースでできました。 <head> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x=Math.floor(Math.random()*n); sub_flame.location.href = rlURL[x]; } //--> </script> </head> <body TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;height:100%;" onLoad="RndmOpen()"> <script><!-- document.write("<iframe src=\""+riURL[x]+"\"></iframe>"); //--> </body> 以下のhtmlのようなページです。 できましたら、このソースに書き加え頂けますと 大変助かります。 宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> </table> </body> </html>

  • Iframeとして呼び出すページを120px以下を表示したい

    Iframeを使いたいのですが、A.htmlの高さ120pixから下をIframeで指定したいときはどうしたらいいでしょうか。 <html> <head> <title>testtitle> </head> <body> <div width:100%; height:120px;> <table> <tr> <td><iframe src="A.htm" width="100%" height="100%" frameborder="0" scrolling="no" overflow:no></iframe><td> </tr> </table> </div> </body> </html> 呼び出すIframeの中身のページについて 高さを120pix以下を表示したいのですが。 よろしくおねがします。

  • iframeの透過

    フレーム内の背景が透けて見えるようにpng画像を使用したのですがIEでは全く透過されません(firefoxではうまく透過されます) 出来ればIE6以上で透過できるようにしたいのですがどなたか分かる方みえないでしょうか? <td height="308" colspan="8" background="背景画像.jpg"><iframe src="フレーム画像.png" width="530" height="268" scrolling="yes" frameborder="0" style=" background-color:allowTrdansparency="true"></iframe></td>