- 締切済み
iframeのheight可変方法について教えてください
iframeのheight 自動可変 についてのjavascriptはたくさん書き込みがありますが、親ページの<head>～</head>内にscriptの書き込みは不可の場合に実現可能かお教えください。（楽天サイトのため） 【親ページ】 <html> <body> <iframe src="hoge.html（子ページ）" width="900px" height="●●"> </body> </html> 【子ページ】 <head>内など自由に書き込み可能 ●●部分を可変にしたいのですが可能でしょうか？ 可能な場合、実際のソースもお教えいただければ幸いです。 宜しくお願いいたします。
- receno
- お礼率81% (13/16)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ご提示の場合、 window.parent.document.getElementsByTagName('iframe')[0].style.height='500px'; または、 window.parent.document.getElementById('a').style.height='500px'; javascriptを理解できるようになってください。
- fujillin
- ベストアンサー率61% (1594/2576)
子フレームのソースにいれます。 <script>タグ内に記入してください。 iframeにidを設定しおいて、以下のような指定の方をお勧めします。 window.parent.document.getElementById('id').style.height='500px';
お礼
ご回答ありがとうございます。 再現ができないため、すみませんが、続けてご質問させてください。 実際ソース： 【oya.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <body> <iframe src="ko.html" scrolling="no" frameborder="0" id="a">このページはインラインフレームを使用しています。インラインフレームに未対応のブラウザをお使いのかたは<a href="・・・">こちら</a>へどうぞ</iframe></td> </body> </html> 【ko.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script> window.onload = function(){ window.parent.document.getElementsByTagName('id')[0].style.height='500px'; } </script> </head> <body> ・ ・ ・ </body> </html> これで間違いないでしょうか？ ●id部分は、ko.html のid部分は、a に書き換えた方がよろしいのでしょうか？ ●height='500px' 部分は最低限のheight指定で、実際は可変するのでしょうか？ ●実際に使用する際は、<iframe src="ko.html"・・・>部分は、<iframe src="http://www.rakuten.ne.jp/gold/・・・.html"・・・>となりますが、このように他サーバーへのhtml参照で、可変は可能でしょうか？ 大変お手数ですが、ご回答いただければ幸いです。 宜しくお願いいたします。
- fujillin
- ベストアンサー率61% (1594/2576)
親の中のiframeがひとつという仮定で、子フレームから以下のように指定 window.onload = function(){ window.parent.document.getElementsByTagName('iframe')[0].style.height='500px'; } iframeにidを設定しておいたほうが、扱いやすいと思いますが…
お礼
ご回答ありがとうございます！ まったくの知識不足でお恥ずかしいのですが、 ＞子フレームから以下のように指定 window.onload = function(){ window.parent.document.getElementsByTagName('iframe')[0].style.height='500px'; } これは、どの部分に書けば宜しいでしょうか？ ご教授お願いいたします。
関連するQ&A
- javascriptを無効にする方法～<iframe>タグが正常に動作しない～
下記、HTMLを作成したのですが、wikipediaのjavascript?によって、折角開いた、yahooのページもwikipediaにとって変わられてしまいます。 wikipediaのjavascriptを無効にする方法は無いでしょうか？若しくは、こういったjavascriptを見つけた時、強制的に、排除する方法など無いでしょうかね？ 折角開いたページが、こういったjavascriptがあることで全て強制的に飛ばされてとても困っています。 宜しくお願い致します。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IFRAME src="http://ja.wikipedia.org/" width="900" height="1500"></IFRAME> <HR> <IFRAME src="http://yahoo.co.jp" width="900" height="1500"></IFRAME> </BODY> </HTML>
- ベストアンサー
- JavaScript
- <iframe>タグが正常に動作しない
下記HTMLを作成した場合、タグが正常に作動しません。 wikiのページに何か細工があるようですがどういった仕掛けが入っているのでしょうか？ また、これを正常に表示させる方法はありますか？ ご存知の方、教えてください。 宜しくお願い致します。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IFRAME src="http://ja.wikipedia.org/" width="900" height="1500"></IFRAME> <HR> <IFRAME src="http://yahoo.co.jp" width="900" height="1500"></IFRAME> </BODY> </HTML>
- ベストアンサー
- HTML
- Iframeとして呼び出すページを120ｐｘ以下を表示したい
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以下を表示したいのですが。 よろしくおねがします。
- 締切済み
- JavaScript
- htmlからiframeされないようにする設定
htmlでiframeされないようにする設定 htmlでＷＥＢページを作成していて偶然気付いたのですが、iframeでgoogleを指定しても表示されません。 iframe先をまだ作っていなかった為、ダミーで埋め込んで気付きました。 yahoo!など他のサイトでは表示されます。 そこで思ったのが、自分のサイトが知らないところで他のhtmlのiframeに納まっているなんてことは滅多にある事ではないが、あったら気持ち悪い。念のため止められるなら止めておきたい。 googleのように他のhtmlからiframeで呼び出せないようにするには、どのような設定が必要なのでしょうか。 <html> <head> <title>テスト</title> </head> <body> google<br> <iframe src="http://www.google.co.jp/" height="768" width="1024">google</iframe><br> <br> YAHOO!<br> <iframe src="http://www.yahoo.co.jp/" height="768" width="1024">YAHOO!</iframe><br> <br> </body> </html>
- ベストアンサー
- HTML
- <iframe 内のスクロール
<iframe タグを使って、JavaScript でスクロールをさせたいの ですが、 <iframe width=150 height=200 src="test.htm"></iframe> 上記これだとスクロールしてくれるのですが、 <iframe width=150 height=200 src="http;//google.co.jp"></iframe> これだとスクロールしてくれません。 JavaScript は scroll(); を使ってます。 これは自前ページだけで、既存サイトのスクロールは無理なのでしょうか。 (http: だとアンカーになって見にくいので http; にしてます)
- 締切済み
- JavaScript
- <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>
- ベストアンサー
- JavaScript
- JavaScriptでiframeの高さを自動調節する方法を試しているがうまくいかない
JavaScriptでiframeの高さを自動調節する方法を 下記サイトを参考に試しているのですが、 読み込み先ファイルをphpファイルにするとうまくいきません。 http://www.revulo.com/blog/20070616.html 《参考サイトより example.html》 <head> ...... <script type="text/javascript"> function resizeIframe() { var iframe = parent.document.getElementById("recent_iframe"); var height = document.documentElement.scrollHeight; iframe.style.height = height + 10 + "px"; } </script> </head> <body onload="resizeIframe()"> ...... 上記のようなソースを子HTMLファイルに書いて、親HTMLファイルから <iframe id="recent_iframe" src="example.html"> </iframe> というように読み込むと問題なく子ファイルの大きさに iframeの高さが自動調節されて表示されるのですが、 参考サイトのソースをphpファイルに記載して、 iframeからフルパスで読み込もうとするとうまく高さが調節されません。 <iframe id="recent_iframe" src="フルパス/exsample.php"> </iframe> 解決策はありますか？
- 締切済み
- JavaScript
- Netscape6.02におけるiframeの%表示について
インラインフレームを使って、下の例のように％指定で表示させたいのですが、 Netscape7では問題なく表示されるのですが、Netscape6.02では表示されません。 （表示されないというか、0%と解釈されるようです。） サイズを％ではなくピクセルで指定すれば問題ないのですが、画面サイズにかかわらずフルサイズで表示されるようにしたいため、パーセンテージで指定したいのです。 何かいい方法をご存じの方がいたら、教えて下さい。 無理な場合は、Netscapeのバージョン7未満では別のページにジャンプさせるという方法でもかまいません。 よろしくお願いします。 （例） <html> <head></head> <body> <table width="100%" height="100%"> <tr> <td width="100%" height="100%"> <iframe src="http://www.okweb.ne.jp/" width="100%" height="100%"></iframe> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- <iframe>内にHTMLをランダム表示するには？続きです。
先日の<iframe>内にHTMLをランダム表示するには？の続きなのですが、 http://questionbox.msn.co.jp/qa2962976.htmlの疑問は 皆様のお力で解決しました。 誠にありがとうございました。 もう一つ教えて頂きたいことがあるのですが、 かなりの素人なので説明不足など分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeを配置し、 各iframeをランダムにしたいのです。 その際、各iframeは別々のフォルダーに収納されているhtmlを 表示するようにしたいです。 例えば、同じhtmlに iframe１、iframe２、iframe３があるとし、 ０１、０２、０３という３つのフォルダーの中に ０１.html、０２.html、０３.htmlがそれぞれ収納されているとした場合、 iframe１は01のフォルダーの中のhtmlをランダムで表示し、 iframe２は02のフォルダーの中のhtmlをランダムで、 iframe3は03のフォルダーの中のhtmlをランダムで、 といったランダム表示にしたいです。 あまりの素人なので全く分かりませんので、 大変申し訳ありませんが、 多少いじってコピペするくらいまで完成されたソースを教えて頂けますでしょうか？ 宜しくお願い致します。 ------------------------------------------------------------------------- 以下のソースは、 ３つの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>
- ベストアンサー
- JavaScript
- テーブルの中にiframe
テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
お礼
ご丁寧にありがとうございます。 勉強いたします。