質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

9233閲覧

iframeの高さを自動的に調整する

dreamliner1977

総合スコア13

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/30 07:23

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の記述の高さ指定をとっても、うまくいきません。

他のやり方もネットで調べていろいろとやってみてはみたものの、どうしても、思った通りになってくれないので、初心者でも解決できる方法を教授いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

挿入したスクリプトの'{' と '}' の数があっていません。
おそらくコピーしてきたコードが不足しています。
コピーするときに範囲設定を間違えたのではないでしょうか。

適切にインデント(各行の頭にスペースを挿入してコードを読みやすくすること)することで、この手の間違えはすぐにわかるはずですので、そういった癖を付けたほうが良いと思います。

以下のように処理を付け足すと、きちんと動作すると思います。

ただし、iframe で読み込んでいる "terminal1.html" の内容が遅れてサイズを変更するようなhtml になっていると、きちんと動作しませんので注意してください。

html

1<script> 2 function adjust_frame_css(F){ 3 if(document.getElementById(F)) { 4 var myF = document.getElementById(F); 5 var myC = myF.contentWindow.document.documentElement; 6 var myH = 500; 7 if(document.all) { 8 myH = myC.scrollHeight; 9 } else { 10 myH = myC.offsetHeight; 11 } 12 /* ここから追記部分 */ 13 //フレームのスタイルで計算した高さを指定する 14 myF.style.height = myH + 'px'; 15 } 16 } 17</script>

また、スクリプトの挿入位置は</body> の直前よりも <head></head>間のほうが良いと思います。

<iframe> タグの onLoad 属性で adjust_frame_css 関数を呼び出しているため、 iframe の load イベントが発火された時点で adjust_frame_css 関数がすでに定義されている必要があります。 (おそらく iframe の読み込みが終わるころには <script>~</script>も読み込み終えているので、</body>直前でも動作するにはするのですが)

投稿2018/07/31 07:45

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dreamliner1977

2018/07/31 10:02

こんにちは。 ご回答ありがとうございます。 ご教授の通り、やってはみたものの今のところ解決せず、四苦八苦しております。 一つの仮説で、 不要なパーツ、div で囲んだ他のパーツを取り除いてみて、シンプルなHTMLにしてみました。 やはり、見切れてしまいました。 クロムでやると全くダメなのですが、IEでみると、きちんと表示されます。 IEで開くとくにはアクティブXがどうのこうのと警告がでてYESをおすと、フレームの中がきれいに表示されます。 問題が別のところにあるのかもしれないので、引き続き頑張ってみます。
R.Mizukami

2018/07/31 10:15

iframe 内のデータにアクセスするためには、親ファイルとフレーム内ファイルが同一ドメインである必要があります。 file プロトコルでページを読み込んでいる場合、Chrome では常に別ドメイン扱いとなってアクセスできなくなります。 webサーバーにアップして http:~ の形でアクセスすれば Chrome でもちゃんと動作するはずです。 IEの警告も同様です。
dreamliner1977

2018/07/31 11:29

こんばんは。 アドバイスありがとうございます。 親と子は同じサーバーの中、改装に並列しておいております。 今は、ローカルでしか試していないので、さっそくアップロードしてみます。
dreamliner1977

2018/07/31 12:13

こんばんは。 ご指導の通りにやってみたところ、7割うまくいきました。 レスポンシブも問題なく稼働しました。 ただ、PCのワイズを狭くしていって、スマホ用の表示に変わったときに、バナーが小さくなる代わりに、下に大きく余白ができてしまいました。 症状としては、初めて親ページを読み込んだときには、きっちりフレームの高さをみて表示してくれます。 でも、ブラウザの幅をアコーディオンさせるとその下に余白ができ、さらに元の幅に戻しても最初読み込んだときのようにフレーム内がきれいにひょうじされることがありませんでした。 height や widthをいろいろ触って試していますが、やはり難航しているところです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問