スタートページ＞ Javascript

外部ＨＴＭＬ読込での留意点

現在表示されているＨＴＭＬファイル（親ファイル）の指定個所に、他のＨＴＭＬファイル（子ファイル）を表示する手段をここでは「外部ファイル読込」という。

外部ファイル読込の代表的手段である
　　irame：ＨＴＭＬのiframe
　　Javascript：JavascriptのAjax機能
　　Prototype：Ajax.update, Ajax.Response
　　jQuery：主にloadメソッドに関する機能
について、特徴と留意点をまとめた。

ここでは、私が理解したポピュラーな機能で実現できる範囲に限定している。以降で「できない」とした事項は、高度な技術を利用すれば「できる」のかもしれない。
私の技術知識では、次に掲げる「要件」を満足する「銀の弾丸」を見つけられないでいる。それに少しでも近づけるには、ページ末尾に「解決したいこと」がある。ご教示いただければ幸甚であり、それが本ページ公開の真の目的でもある。<

要件整理と結論

私の関心は、子ファイルの部品化にある。子ファイル単体でも一つのページとして利用されるが、それらをまとめたページを作りたいのである。
子ファイル作成時では、将来どの親ファイルに読み込まれるかを想定する必要がなく、親ファイル作成時に子ファイルの内部まで知る必要がないようにしたい。

このような関心なので、自分の作成したファイル間に限定してよく、他サーバにあるファイルの読込は対象にする必要はない。
また、ここで扱うファイルの文字コートは、すべてUTF-8であるとする。

要件１　親ファイルと子ファイルの表示でのシームレス化

全体の表示を、親ファイルと子ファイルの境界がわからないようにしたい。
結果：iframe以外ではこの要件は解決される。

iframeでは、枠やスクロールバーが邪魔になる。特に高さ指定は、子ファイルを読み込むまでわからないので指定できない。

結果：これを解決するのがjQueryである。比較的簡単なスクリプトで高さを自動調整してiframeに表示することができる。→参照：「jQueryとiframe：heightの自動調整」

要件２　子ファイルでの参照ファイルの継承

例えば、子ファイルで表示画像のＵＲＬを相対パス指定している場合、親ファイルに取り込まれてたときも画像が表示できるようにしたい。子ファイルで記述したスタイルやスクリプトも、子ファイルが単独で表示されたときと同じようにしたいのである。
結果：これを満たす手段は、iframeだけである。他の手段で実現するのは困難である。

要件３　子ファイル読込による親ファイルへの影響の防止

子ファイルのスタイルやスクリプトと同じ名称で機能が異なるものが親ファイルにあるとき、子ファイルの読込前と読込後で親ファイルの表示や機能に違いが生じるようでは困る。
結論：jQueryで全体読込をしたとき、その危険性がある。

要件４　子ファイルの部分読込

子ファイルには、おそらく冒頭に<h1>でのタイトルや前文があるだろう。それをそのまま表示するのはバランス上好ましくない。また、子ファイルの<div id="xxx" ～>の部分のように一部分だけを表示したいことがある。

部分読込の場合は、head部が読まれないので、要件２を満たすのはさらに困難になろう。それに、iframeでは、一般に部分読込ができない。
結論要件４と要件２・３を同時に満足させる方法はない。

jQueryはセレクタにより部分読込ができる。他の手段は、基本的に子ファイルを行ベースで取り扱うので、上述のように複数行にまたがる範囲を取り扱うのは困難である。
jQueryを用いるとき、部分読込で高さ自動調整を行う方法を私はしらない。

要件１はもぼ解決していると思うので。ここでは、要件２と要件３について、子ファイルを全体読込した場合と、部分（body部のみ）読込をした場合について検討する。

テストケースの設定

Body部の内容

▼▼▼▼▼▼▼▼▼▼　ここから子ファイルの内容 ▼▼▼▼▼▼▼▼▼▼

▲▲▲▲▲▲▲▲▲▲　ここまで ▲▲▲▲▲▲▲▲▲▲

以下は親ファイルに記述した文です。

Ｋ：<p>子ファイルのhead部で設定した<span class="iroGreen">green</span>です</p>

Ｌ：<p>子ファイルの外部ＪＳで指定した<span class="iroBlue">blue</span>（）</p>

Ｍ：<p>子ファイルのインラインでの関数<button onClick="インライン関数()"> </button>です。</p>

Ｎ：<p>子ファイルのhead部の関数<button onClick="子ファイルｈｅａｄ部関数()"> </button>です。</p>

Ｏ：<p>子ファイルの外部ＪＳの関数<button onClick="子ファイル外部ＪＳ関数()"> </button>です。</p>

▲▲▲▲▲▲▲▲▲▲　テストデータの終了 ▲▲▲▲▲▲▲▲▲▲

その他の設定

子ファイルHead部 子ファイル外部ライブラリ 親ファイルHead部
スタイル .iroGreen {color:green} .iroBlue {color: blue} .iroRed {color:red}
iroGreen {color:orange }
スクリプト 子ファイルhead部関数 子ファイル外部ＪＳ関数 親ファイル関数
子ファイルhead部関数

結果一覧

上のテストデータを各種手段により表示したときの結果を示す。

相対指定：対象に達したとき○。該当ファイルがないとき×。
スタイル：文と同じ色なら○。異なれば×。
スクリプト：正しいアラームが表示されれば○。アラームが出ない、異なるアラームのときは×
黒字は常識的な結果、赤字は留意すべき事項である。

確認実例ページ
子ファイル

全体読込Body部読込
iframe ○ －
Javascript ○ ○
Prototype ○ ○
jQuery ○ ○

結果の検討

比較対象手段の整理

以上から、子ファイルとの比較対象は、
　　Javascriptの全体読込
　　jQueryの全体読込
　　部分読込
の３つにまとめられる。

相対指定（黄色の行）

これらは、常識的な結果であり、３つの手段に共通である。

スタイル

すなわち、スタイルに関しては、常識的な結果になる。

スクリプト

Javascriptでのスクリプトは、常識とは異なる結果になる。

親ファイルへの影響

これが○になるのは、親ファイルが子ファイルにより影響を受けること、すなわち、読込前と読込後で変化を生じることであるから、十分に留意する必要がある。

jQueryでの○には注意する必要がある。とかくスタイルやスクリプトでは、同じような機能のものには同じような名称をつけるが、その機能には部分的に異なっていることが多い（全く同じ機能ならば、統一ライブラリに登録する）。思わぬ副作用が生じる危険性がある。

JavascriptとjQueryで異なるのは、（私にはよくわからないだが）Javascriptでの読込は文字列として読込み、各行単位で処理することを基本としており、そのため、数行にまたがる機能は有効にならない。それに対してjQueryでは、セレクタを単位にして処理するので、有効になるのではないかと思われる。
Javascript（特にPrototype）のＤＯＭ解析のような高度な技術を用いれば、jQueryと同じようにできるかもしれない。

解決したいこと（ご教示のお願い）

以上みてきたように、私の知識能力では「銀の弾丸」を得ていない。
次の技術があれば、「銀メッキ」の弾丸になると思う。ご教示いただければ幸甚である（私のメールアドレス：hitoshi@kogures.com）

jQueryとiframe表示での部分表示

親ファイルと子ファイルを独立させるには、「iQueryでiframeの高さ自動調整」が最も要件満足に近いが、致命的な欠点は部分読込ができない（あるいは部分読込では要件が達せられない）ことである。
その姑息的な手段として、「いったん全体読込を行い、それを非表示にして、改めて該当箇所を表示する」という方法が考えられる。非表示や表示の機能は簡単であるが、iframeに対してこれをうまく組み込むことができないでいる。

以下は、iframeを使わない場合に限定する。

相対パス指定の補正

子ファイルで image.jpeg としている個所を called/image.jpeg にするように、親ファイルと子ファイルの関係（これは親ファイルが知っている）により、子ファイルの相対指定を親ファイルからの相対指定に置換する手段である。これができれば、画像表示やリンクが解決するので、実務上かなり改善される。
相対指定が子ファイルのフォルダ以下にある場合は比較的簡単だろうが、「../叔母/従妹.html」のように上位のフォルダを指しているとき、上位フォルダを親ファイルはしらないので、困難である。

クラス、ＩＤの接頭子補正

親ファイルへの影響を防ぐには、子ファイルのクラスやＩＤを親ファイルとは別名称にすることが考えられる。例えば、子ファイルで class="aaa" を class="xxxaaa" （xxx は親ファイルが設定した接頭子）に置換すれば、親ファイルでの class="aaa" の部分が子ファイルの影響を受けなくなる。
このとき、Head部のスタイルにも適用する必要がある。