iframeの高さをページごとに調節する方法とは？
- iframeを使用していますが、読み込むページによって高さが異なるため見栄えが悪いです。javascriptで指定できるそうですが、中々うまくいきません。
- 読み込むページがcgiの場合でも調節は可能でしょうか？
- iframeの高さをページごとに調節する方法を知っている方がいましたら教えてください。
- ベストアンサー
iframe の高さをページごとに調節
iframeを使用していますが、 読み込むページによって高さが異なるため見栄えが悪いです。 javascriptで指定できるそうですが、中々うまくいきません。 指定する方法を知っている方がいましたら教えてください。。 また、読み込むページがcgiの場合でも調節は可能でしょうか？？ ＝＝＝＝＝＝＝＝＝ ちなみに、下記方法で行った場合に失敗しています。 <iframe name="main"id="frame_set" src="http://www.***.com/***.cgi" width="100%" height="500" frameborder="0"> </iframe> <script language="JavaScript"> <!-- function frame_check(){ if(frame.document.body){ f=frame.document.body.scrollHeight; if(f) document.getElementById("frame_set").height=f+20; setTimeout("frame_check()",100); }else{ setTimeout("frame_check()",100); } } setTimeout("frame_check()",10); --></script> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ よろしくお願いします＞＜
- CGISENSOU
- お礼率26% (12/45)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
HIMAJINさんのところのソースですね。 インラインフレームの名前（main）とスクリプトで指定しているフレーム名（frame）が異なっています。どちらかを修正してそろえたら動きます。 具体的に言うと <iframe name="main"・・・>の"main"を"frame"に変更するか、 6,7行目のframeをmainに置き換える
関連するQ&A
- SafariのIframeで高さが取得できません
<script language="JavaScript"> <!-- function frame_check(){ if(main.document.body){ if(navigator.userAgent.indexOf("Opera") != -1){ // 文字列に「Opera」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("MSIE") != -1){ // 文字列に「MSIE」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // 文字列に「Firefox」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Netscape") != -1){ // 文字列に「Netscape」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Safari") != -1){ // 文字列に「Safari」が含まれている場合 var f = main.documentElement.offsetHeight; } if(f) document.getElementById("frame_set").height=f+20; setTimeout("frame_check()",100); }else{ setTimeout("frame_check()",100); } } setTimeout("frame_check()",10); --></script> <iframe name="main" id="frame_set" src="mainf.html" width="800" height="4000" frameborder="0" scrolling="no"></iframe> 上記のスクリプトを作成しましたが、IE7、 Firefoxではうまくいきますが、SafariではIframeに表示するページの高さが取得できません。 どこが問題なのかご教授お願いいたします。
- 締切済み
- JavaScript
- PHPにiframeでニュースを表示
PHPを利用したショッピングカートのトップにニュースを掲載しようとしています。 ニュースはCGIで管理しています。 高さを自動調整するJavaScriptを組んでみたのですが、ページを開いた時1行分しか表示せず、リロードすると自動サイズではなく"iframeで設定したサイズ"になってしまいます。 <script language="JavaScript"> <!-- function GetHeight(Y,NAME) { var app = navigator.appName.charAt(0); if(navigator.userAgent.indexOf('Safari') != -1){ document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; }else if (app == "N") { document.getElementById(Y).height = parent.frames[NAME].document.height +80; } else { document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; } } // --> </script> <iframe src="./info.cgi?mode=contents2&cont=JP" onload="GetHeight(this.id,this.name)" id="Z" name="newZ" height="500"「←このサイズになる」 width="100%" frameborder="0" marginheight="0" marginwidth="0"> </iframe> これは何が悪いのでしょうか? もしかして、文字コードが関係していますか? PHPはEUC-JP、iframe先はShift_JISです。
- 締切済み
- PHP
- スクロールの時間調節
初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>
- 締切済み
- JavaScript
- IFRAMEのscrollingを常にnoにしたい
iframeを使ってBBSをscrolling="no"で表示したいのですが、 src="パスワード.cgi"から自動でbbs.cgiになったときにスクロール表示してしまいます。 iframe内で表示先が変更された場合でもスクロール表示しないようにできるのでしょうか？もしできるのであれば教えていただきたいのですが… 掲示板をiframe と言うことで、某ホームページをを参考にスクロールが表示さ れないようにしてみました。 が以下のようにパスワードを入力後に表示するiframe はスクロールを表示して しまいます。 <script type="text/javascript"> <!-- function LoadFrame(frid) { var IFR = document.getElementById(frid); IFR.style.height = (IFR.contentWindow)? IFR.contentWindow.document.body.scrollHeight: document.frames[frid].document.body.scrollHeight; } //--> </script> <iframe src="member/gate.cgi" name="coach" onload="LoadFrame(this.id)" id= "Ifr" width=497 frameborder="0" scrolling="no"></iframe> 試行錯誤しながらなんとかやってる超初心者です。よろしくお願いします。
- 締切済み
- HTML
- iframeのサイズの自動調整について教えてください。
iframeのサイズの自動調整について教えてください。 htmlにiframeで、cgiを組み込んでました。 cgiは、質問を投げる画面と結果を表示する画面があります。 質問画面と結果表示画面の長さは違います。 下記の2パターンで試してみたんですが、質問画面は問題ないですが、結果画面が問題ですね。 1．<iframe src="aa.cgi" style="width: 480px; height:auto;" onload 'this.style.height = parseInt(this.contentWindow.document.documentElement.scrollHeight + 30)+"px";'> </iframe> sapari,google chrome,operaでは、オーケー。 IE,firefoxでは、質問画面の長さのまま。 2.<iframe src="aa.cgi" onload="GetHeight(this.id)" id="Y" name="newY" height="1" width="480" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe> GetHeightのソースは、↓ <script language="JavaScript"> function GetHeight(Y) { var app = navigator.appName.charAt(0); if (app == "N") { document.getElementById(Y).height = parent.frames['newY'].document.height +20; } else { document.getElementById(Y).height = parent.frames['newY'].document.body.scrollHeight; } } </script> IE,firefoxでは、オーケー。 sapari,google chrome,operaでは、質問画面の長さのまま。 javascriptは苦手なので、まとめる方法か、別の方法がありましたら、 教えて下さい。 よろしくお願いします。
- ベストアンサー
- 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
- iframeの高さ自動調整
いつもお世話になっております。IFrameの高さについて、教えてください。 IFrameの高さを、その内部に読み込むページの高さに自動的に合わせたいのですが、上手くいきません。 色々調査して、 <iframe src="http://xxx.yyy.com/" onload="this.style.height=this.contentWindow.document.body.scrollHeight;" width="100%" frameborder=0></iframe> 等を試しましたが、IE7ではアクセス拒否のエラーが出ます。 同じディレクトリのhtmlを指定するとうまくいくようですが、http://で指定されるurlを指定するとどうしてもうまくいきません。 このようなことは不可能でしょうか？よろしくい願いします。
- 締切済み
- JavaScript
- IFRAMEで高さを自動調整したい
IFRAMEを使っているのですが、ＰＣを起動して最初にページを開いたときだけ、正しい高さに設定できなくて困っています。 「更新」をクリックするとそれ以降はうまく動くのですが... ＩＥ(6)の症状で、FireFoxではＰＣ起動直後でも問題なく動きます。 <iframe src="http://aaaaa.php?mode=abc" onload="LoadFrame(this.id)" id="Ifr-a" width="700" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe> javaScript側は、 function LoadFrame(frid) { var IFR = document.getElementById(frid); IFR.height = (IFR.contentWindow)? IFR.contentWindow.document.body.scrollHeight: document.frames[frid].document.body.scrollHeight; } ＰＣを起動した直後の１回目だけうまく表示されません。 IFR.height<1のようなので、処理結果は0になってるようです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ページ訪問時にiframe内を自動スクロールしたい
iframe内に表示した内容（aaa.html）を、 ページ訪問時（もしくは更新時）に自動的に100px下にスクロール させたいと思っていますが、うまくできず困っています。 将来的にはif文によってスクロール位置を変えたいと考えています。 またサイトの都合上、アンカータグを使用しての位置指定はできません。 JavaScriptの使い方が間違っているのでしょうか？ ご教示お願い致します。 以下ソースです。 framescroll.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> // 縦スクロール－上 function framescrollu() { document.getElementById("frame1").contentWindow.scrollBy(0,-100);} // 縦スクロール－下 function framescrolld() { document.getElementById("frame1").contentWindow.scrollBy(0,100);} </script> </head> <body> <center> <script type="text/javascript"> // 自動スクロール－下に100 document.getElementById("frame1").contentWindow.scrollBy(0,100);} </script> <!-- 縦スクロール --> <form> <input type="button" value="up" onClick="JavaScript:framescrollu()"> <input type="button" value="down" onClick="JavaScript:framescrolld()"> </form> <br> <iframe id="frame1" src="aaa.html" name="frame1" frameborder="1" scrolling="auto" width="200" height="200"> </iframe> </center> </body> </html> aaa.html ああああああああああああああああああああああ<br> いいいいいいいいいいいいいいいいいいいいいい<br> うううううううううううううううううううううう<br> ええええええええええええええええええええええ<br> おおおおおおおおおおおおおおおおおおおおおお<br> ああああああああああああああああああああああ<br> いいいいいいいいいいいいいいいいいいいいいい<br> うううううううううううううううううううううう<br> ええええええええええええええええええええええ<br> おおおおおおおおおおおおおおおおおおおおおお<br> ああああああああああああああああああああああ<br> いいいいいいいいいいいいいいいいいいいいいい<br> うううううううううううううううううううううう<br> ええええええええええええええええええええええ<br> おおおおおおおおおおおおおおおおおおおおおお<br>
- ベストアンサー
- JavaScript
- iframeのソースを取得
iframeのsrcのソースを取得する方法を教えて下さい。 下のソースのcld.document.sourceの所が知りたいです。 body.outerHTMLでbodyの中なら得られますがそうではなくて、<html>から</html>を取得して、それを加工して表示しようというものです。 <iframe id=cld src=cld.html></iframe> <script language="JavaScript"> cldsource = cld.document.source; if(cldsource.substr(... ... </script>
- 締切済み
- JavaScript
お礼
変更したら解決できました！！！ お陰でレイアウトも崩れずうまくいっています。 本当にありがとうございました！