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

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

ただいまの
回答率

88.64%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 6,118

dreamliner1977

score 13

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

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

<script>
    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;
        }
        /* ここから追記部分 */
        //フレームのスタイルで計算した高さを指定する
        myF.style.height = myH + 'px';
      }
    }
</script>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/31 19:02

    こんにちは。

    ご回答ありがとうございます。
    ご教授の通り、やってはみたものの今のところ解決せず、四苦八苦しております。

    一つの仮説で、
    不要なパーツ、div で囲んだ他のパーツを取り除いてみて、シンプルなHTMLにしてみました。
    やはり、見切れてしまいました。
    クロムでやると全くダメなのですが、IEでみると、きちんと表示されます。
    IEで開くとくにはアクティブXがどうのこうのと警告がでてYESをおすと、フレームの中がきれいに表示されます。

    問題が別のところにあるのかもしれないので、引き続き頑張ってみます。

    キャンセル

  • 2018/07/31 19:15

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

    キャンセル

  • 2018/07/31 20:29

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

    キャンセル

  • 2018/07/31 21:13

    こんばんは。
    ご指導の通りにやってみたところ、7割うまくいきました。
    レスポンシブも問題なく稼働しました。

    ただ、PCのワイズを狭くしていって、スマホ用の表示に変わったときに、バナーが小さくなる代わりに、下に大きく余白ができてしまいました。

    症状としては、初めて親ページを読み込んだときには、きっちりフレームの高さをみて表示してくれます。
    でも、ブラウザの幅をアコーディオンさせるとその下に余白ができ、さらに元の幅に戻しても最初読み込んだときのようにフレーム内がきれいにひょうじされることがありませんでした。
    height や widthをいろいろ触って試していますが、やはり難航しているところです。

    キャンセル

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

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る