iframe（インラインフレーム）による外部ファイルの表示

例１：標準仕様での表示

iframe の記述形式を示します。style で指定しないと、ブラウザでの標準の大きさになります。

        <iframe src="called/called2.html"></iframe>

例２：サイズの指定

例１ではあまりにも小さいので、幅（wigth）や高さ（height）を変更するには、次のように <iframe ～> で記述します。

        <iframe src="called/called2.html" width="90%" height="300px"></iframe>

横幅（width）を広げたので、例１での横のスライドバーがなくなりました。
横幅が<pre>や<pre>など折れ曲がりのない要素よりも大きくなったからです。
同様に、高さ（height）ページの大きさよりも大きくすると、縦のスライドバーがなくなります。

style部でサイズ指定をすることもできます。

　　style部　　iframe.rei1 { width: 90%; height: 300px }
　　body部     <iframe class="rei1" src="called/called2.html"></iframe>

---

iframe内の子ファイルは、子ファイルが独立に開かれたように振る舞う

iframe のなかの文章を読んでください。
iframeの内部では、子ファイル（called/called2.html）を独立に開いたときと同じ状況になります。

• テスト１の結果
  画像表示やリンク先の指定は、called2.htmlでの相対位置が生かされます。
• テスト２の結果
  子ファイルで指定した外部ＣＳＳファイル、head部のstyleが反映して、
  　　h1タグの文は、外部スクリプトで指定したpurple
  　　h2タグの文は、head部で指定したgreen
  になりました。
  そして、親ファイルで指定した、
  h1 { ～ text-align: center }　中央揃え
  は反映されていません。すなわち親ファイルの指定は反映されません。
• テスト３の結果
  これも正常に動作します親ファイルのscript部に、 callJS() がありますが、これは呼び出されていません。

      <script type="text/javascript">
          function callJS() {
              alert("親ファイルのスクリプトです");
          }
      </script>
  

height の自動調整

親ファイルのiframeに子ファイルを取り込むとき、子ファイルの大きさに合わせて高さ（height）を自動調整できれば、iframeの境界がなくなり、あたかも親ファイルのなかに子ファイルが記述されているかのように見せることができます。いくつかの部品（子ファイル）を組み合わせて、一つのページにしたいという場合に便利です。

これをJavascript だけで実現するのは困難なようです。
jQueryを利用すると、比較的容易に実現できます。→参照：「jQueryとiframe」

---