iframeのインクルード

ききよ

2024年4月6日 15:11

自分用メモです。

プログラミング系だと、「機能」の単位を作成して、
後からそれらを挿入して組み立てることが多いです。

これの大きい恩恵として、不具合が発生したときに機能を取り外してバグが発生するかの確認など整備がとても簡単になるんですね。
また、新機能を入れる場合も付け加えるだけなのでとても簡単です。

こういった仕組みをインクルードと言います。

HTMLでインクルード

いくつか方法があります。

HTMLでタブ

iframeの入れ子の注意

iframeの中にiframeをさらに入れていくのは注意が必要です。

①displayプロパティはinline

iframeはインラインフレームの略名です。

大きく分けてblockとinlineがあり、イメージとしては
blockが水槽、inlineが中の水という感じ。水槽の形状で変化します。

つまり、iframeの親要素がblockでないと「できるはずのことができない」
と混乱しやすいです。iframeはDivではない
というのを心に留めておきます。

引用:https://saruwakakun.com/html-css/basic/display

これに関連して、iframeを中央揃えにする場合は
親要素CSSに

CSS
      .container{
        text-align: center;
        margin: auto;
        display: block;
      }

を入れるとできます。inlineなので。

②iframeで参照したページは引用側の影響を受けない

CSSは基本的に親要素で設定したプロパティを子孫も持っている場合それを継承します。(親で文字の色を変更したら子孫の文字の色も全て変わる)

例えばyoutubeを埋め込むとして。
サイトのcssでH1要素を変更していても、埋め込んだyoutubeのH1要素は変更されません。

iframeは例外的にプロパティを継承しません。
なので、ページごとにCSSやjavascriptを記入しなおす必要があります。

入れ子にする場合これらを意識する必要があります。

iframe入れ子

今回はhtmlページに直接cssを書き込みます。

親・子・孫のページを作成して、

親
　子
　　孫
　/子
/親

な感じで、親に子のiframe、子に孫のiframeを埋める構造。
親が赤、子が青、孫が緑です。

親.html

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>親ページ</title>
    <style>
      #sample {
        border: red solid;
        margin: 0;
        width: 100%;
        height: 96vh;
      }
      .container{
        text-align: center;
        margin: auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <!-- 中央ぞろえ用div -->
    <div class="container">
      <iframe id="sample" src="testchild.html"></iframe>
    </div>

  </body>

子.html(testchild.html)

<head>
  <meta charset="UTF-8" />
  <title>フレーム内のページ</title>
  <style>
    body {
      margin: 0px;
      border: blue solid;
      color: blue;
    }
    .container {
      text-align: center;
        margin: auto;
        display: block;
        width: 100%;
        height: auto;
    }
    /* nav+iframeのheightの合計がcontainerのheightを超えないようにする。 */
    .nav{
      height: 5vh;
    }
    /* 孫フレームのサイズ */
    iframe{
      width: 100%;
      height: 90vh;
    }

  </style>
</head>
<body>
    <!-- 中央ぞろえ用div -->
  <div id="test" class="container">

    <div class="nav">iframe内のページです.ここはメニュ</div>
    <iframe src="testgchild.html" frameborder="0"></iframe>
  </div>

</body>

孫.html(testgchild.html)

<head>
  <meta charset="UTF-8" />
  <title>フレーム内のページのフレーム内のページ</title>
  <style>
    body {
      margin: 0px;
      border: green solid;
      color: green;
    }
    .container {
      position: relative;
      width: 100%;
      height: auto;
      word-break: break-all;
    }
    .menu{
      position: fixed;
      top: 0;
      right: 0;
      border: violet solid;
      width: 20%;
    }
    .main{
      border: aqua solid;
      width: 79%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="menu">fix固定のメニューです。</div>
    <div class="main">
      iframe内のページのiframe内のページです  
    </div>
  </div>
</body>

Point

上のようなことにならないためには、
埋め込む(親)枠のサイズを埋め込まれる(子)ページのサイズが超えないようにする必要があります。

親ページで設定したiframeのサイズを超えないように
子ページの全体のサイズを決めます。
子ページのiframeはそれに含む要素以下のサイズを指定します。

親：iframe{height: 96vh}
子：中身全体サイズ{height:auto}
　：(要素1+要素2(iframe))==(5vh+90vh)
孫：中身全体サイズ{height:auto}
---
さらにあるとしたら
　：(要素3+要素4(iframe))==(5vh+84vh)<-90vh未満にする
ひ孫：中身全体サイズ{height:auto}
　　：(要素5+要素6(iframe))==(5vh+77vh)<-84vh未満にする

こうすることで一番最後の子孫(ここでは孫)の高さがどれだけ高くなろうと、孫のiframeのスクロールバーだけが表示されるようになります。

終わり。

この記事が気に入ったらサポートをしてみませんか？