jQueryによる外部ファイルのiframeへの読込＜jQuery＜javascript＜木暮仁

jQueryを用いています。head部に　<script src="http://code.jquery.com/jquery-latest.js"></script< が必要です。

ここでは、このページを親HTMLといい、親HTMLから読み込まれて表示されるHTMLファイル（called/called1.html）を子HTMLといいます。

iframeの特徴

通常iframeは、その部分に枠が設定されます。それが便利なこともありますが、場合によっては見ずらいことがあります。その枠を取り払い親HTMLと子htmlをシームレスに見せるには、jQueryの機能が必要になります。→参照：（後述）iframeサイズの自動調整

簡単な例

単に子HTML（called/called1.html）をiframeに表示するだけなら、
　　<iframe src="called/called1.html" width="50%" height="200"></iframe>
とすればよいので、jQueryを使う必要はありません。

しかし、次のような「細工」をするには、jQueryが便利です。

子HTMLの名称、width=、heightを変数とする関数にするには、jQueryを使うと簡潔になります。

<script>
function funcIframe(iframe名, 子HTML名, 幅, 高) {
    $(iframe名).attr({
        src: 子HTML名,
        width: 幅,
        height: 高
    });
}
</script>

↓　<iframe id="ＪＩＨ表示場所５"></iframe>:

ケ：<style>.teal{color:teal}</style>の指定は、子HTMLにはなく親HTMLにありますが、ここには反映されません。
ソ・タ：120x80.jpgは、子HTMLからは120x80.jpg、親HTMLからはcalled/120x80.jpgの相対位置にあります。子HTMLでの相対位置が有効になります。

↓ 子HTML（called/called1.html）の内容

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>.maroon {color:maroon}</style>        <!-- ア -->
<script>
function funcHead() {
    alert("called1.html head部script実行");  <!-- イ -->
}
</script>
</head>
<body>
<script>
function funcBody() {
    alert("called1.html body部script実行");  <!-- ウ -->
}
</script>
<style>.teal{color:teal}</style>             <!-- エ -->
<tagＡ>                                      <!-- オ -->
<p id="idＢ">カ <p id="idＢ"><br> 
<span class="maroon">キ　class="maroon"</span>
<span class="teal">ク　class="teal"</span>
<span class="red">ケ　class="red"</span>
</p>                                         <!-- コ -->
<h4 class="teal">サ　class="teal"</h4>
シ<button onClick="funcHead()">funcHead実行</button><br>
ス<button onClick="funcBody()">funcBody実行</button><br>
</tagＡ>                                     <!-- セ -->
<img src="120x80.jpg"><br>                   <!-- ソ -->
<img src="called/120x80.jpg">                <!-- タ -->
</body>
</html>

iframeサイズの自動調整

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

<script>
    $(document).ready(function(){                      // Ａ
        $("#ＪＩＨ表示場所６").attr( {                     // Ｂ
               "width": "100%",
               "scrolling": "no",
               "frameborder": "0"
        } );
        $('#ＪＩＨ表示場所６').load(function(){             // Ｃ
            $(this).height(this.contentWindow.document.documentElement.offsetHeight);
        });                                             // Ｄ↑
        $('#ＪＩＨ表示場所６').triggerHandler('load');      // Ｅ
    });
</script>

<iframe id="ＪＩＨ表示場所６" src="called/called1.html"></iframe>

Ａ：loadイベントは「ページがロードされたとき」なのに対して、readyは「ページがロードされてＤＯＭ要素準備が完了したとき」の意味です。
ここでは、どちらでもよいと思いますが、このスクリプトがbody部に記述されていること、Ｅが必要だったことからreadyにしました。
Ｂ：ここでiframeのheight以外の属性を設定しました。幅を画面いっぱいにして、スクロールと枠を消しています。iframeタグのなかで記述すれば、これらは不要になります。
Ｃ：「読込が終わったら～」の処理です。
Ｄ：かなり複雑ですが、contentWindow.document.documentElementは、対象となるファイル（ここではifrmeに取り込む子ファイル）の要素のことで、scrollHeightはその高さ（height）の値です。
Ｅ：triggerHandlerとは、clickなど人間が行うイベント（トリガー）をスクリプトで発生させる機能です。ここでは「loadしたとせよ」という意味です。これにより処理が行われます。

表示結果

▼▼▼▼▼▼▼▼▼▼　この直後に<iframe<があります ▼▼▼▼▼▼▼▼▼▼

▲▲▲▲▲▲▲▲▲▲　以上が called/called1.html の全文 ▲▲▲▲▲▲▲▲▲▲

このように、inflameに読み込んだ子ファイルの文と親ファイルの地の文がシームレスになっています。