iframeの高さをレスポンシブルで自動調整したい。
こんにちは。
すでに、ブレイクポイントも設定してあるレスポンシブルのindex.htmlの中にもともとそのファイルの中に書いてあったバナー類を更新しやすいように、iframe化しようとしています。
その部分を別にterminal1.htmlというファイルに書いて、
<!-- Terminal1--> <iframe id="newsframe" onLoad="adjust_frame_css(this.id)" style="border: 0; width: 1800px; height: 500px; margin:0; padding: 0;" scrolling="no" frameborder="0" src="terminal1.html" >(IFRAME 機能を有効にして下さい)</iframe> <!-- Terminal1-->
とiframeを設置しました。
index.html内に設置したところ、横幅は問題なくレスポンシブルになっていますが、高さは今のところ500pxで固定となっています。
ここの高さのところを自動で取得させて、terminal1をすべて表示させたい(スクロールバー無し)、スマホでみてもindex.htmlに書いて実現していた通り、横幅に応じて中身が縮小していくようにしたいです。
ネットで調べると
<script type="text/javascript"> function adjust_frame_css(F){ if(document.getElementById(F)) { var myF = document.getElementById(F); var myC = myF.contentWindow.document.documentElement; var myH = 500; if(document.all) { myH = myC.scrollHeight; } else { myH = myC.offsetHeight; }
を</body>の直前に設置と合ったので、コピペでやってはみたもののiframの中のterminal1の高さが取得できていないようで、スクロールバー無し、中身も見切れている 状態です。
iframeの記述の高さ指定をとっても、うまくいきません。
他のやり方もネットで調べていろいろとやってみてはみたものの、どうしても、思った通りになってくれないので、初心者でも解決できる方法を教授いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/31 10:02
2018/07/31 10:15
2018/07/31 11:29
2018/07/31 12:13