JavaScript 外部ファイルの読み込み方

外部ファイルを使って JavaScript を設定すと、複数の HTML で共用できるだけでなく、HTML のソースを修正せずに JavaScript の変更ができます。
JavaScript 外部ファイルを読み込む場合は、次のように記述します。複数の外部ファイルがある場合も、複数行書くことで読み込むことができます。

js_outside.html から JavaScript の外部ファイルを読み込む

<head>
・・・・
<script type="text/javascript" src="../js_dir/out.js"></script>
<script type="text/javascript" src="../js_dir/child_dir/out1.js"></script>
・・・・
</head>

この例は、次のようなディレクトリとファイル構造の場合を想定しています。 の記号は、ディレクトリを表します。

  • web_dir
    • html_dir
      • js_outside.html
    • js_dir
      • outside.js
      • child_dir
        • out1.js
        • out2.js

JavaScript 外部ファイルのインポート

機能や定義の種類ごとに分けた複数の外部ファイルを利用すると、ホームページ製作がかなり汎用化されます。ところが、前項のような HTML に複数の外部スタイルシートを読み込む記述では、追加の定義の新しいスタイルシートを追加する場合は、HTML を修正しなければなりません。おそらく複数の HTML を修正することになります。
そこで、新しい JavaScript を追加する場合でも、JavaScript 側だけ修正すればよい方法があります。HTML からは、親の外部 JavaScript だけを指定し、親の外部 JavaScript から、子の JavaScript をインポートします。こうすれば、外部 JavaScript の追加や削除があっても、HTML はそのままで親の JavaScript だけを修正すれば済みます。
ディレクトリとファイルの階層は、前項と同じ構造として例を示します。

js_outside.html から親の外部 JavaScript を読み込む

<head>
・・・・
<!--
rel_url="../";//JSに受け渡す 相対 url
//-->
</script>
<script type="text/javascript" src="../js_dir/out.js"></script>
・・・・
</head>

outside.js (子 JavaScript をインポートする)

//インポートする js-file名
var file = new Array();
file[0] = "out1.js";
file[1] = "out2.js";
// head 内にてインポートする js-file を script で書き出す
for (var i = 0,L=file.length; i < L; i++) {
 document.write ('<script type="text/javascript"  src="'+ rel_url + 'js_dir/child_dir/' + file[i] + '"></script>');
}

インポートする外部 JavaScript は、配列 file[i]( i は、0から連番 )に、いくつでも書くことができます。
親の外部 JavaScript からインポートする js ファイルの相対アドレスは、親の外部 JavaScript が組み込まれている HTML (この例では、js_outside.html )が基準になります。 親の js ファイルにインポートする子のファイル名を書いていますが、HTMLに書き出してからインポートすることになるので親の js ファイルが基準にはなりませんので、注意が必要です。
ポイントは、HTML の階層によってインポートする外部 JavaScript の相対 url が変わってしまうことへの対応です。ここでは、HTML から JavaScript に変数 rel_url を介して、HTML からの相対 url を渡すことで解決しています。HTML を置く場所にしたがって、変数 rel_url を設定すれば、outside.js は、汎用的に使用できます。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > JavaScript > 外部ファイル