[JavaScript] 外部ファイルをインクルードする

外部ファイルをインクルードするライブラリを作成した。

Ajax のみでファイルを読み込むと、対象ファイルに日本語が使われている場合は、utf-8 以外の文字コードで文字化けが起きてしまう。本ライブラリでは、PHP 側でファイル読み込みさせることでこれに対応している。SSI の使用や html ファイルの PHP 化をせずに、全ページに共通ヘッダ・フッタを表示するといったことが可能となる。

使い方

ZIPファイルを解凍後(中身はloadFile.jsとgetFile.phpのセット)、任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="common/js/loadFile.js"></script>

次に 読込みを行いたい箇所に div 要素を配置し、クラスにloadFile及び読み込ませるファイルに対応したクラス名を指定する。

対象とする要素はJS側で変更可
"読み込ませるファイルに対応したクラス名" については下で説明

<div class="loadFile data1">ここに外部ファイルを読み込みます</div>

javascript 側では、挿入対象の要素、PHP(getFile.php)ファイルのパス、クラス名と読込みファイルの対応付け、文字コードの設定を行う。

// 挿入対象のクラス名
targetCls : 'loadFile',
// 挿入対象の要素
targetElm : 'div',
// PHPファイルの配置パス(本JSを使用するHTMLファイルからの相対パス)
phpFilePath : './common/php/getFile.php',
// サイトの文字コード
defaultCharset : 'utf-8',
// ファイルに対応するクラス
fileClass : [
	 'data1',
	 'data2',
	 'data3',
	 'data4',
	 'data5'
	 ],
// ファイルの配置パス(phpファイルからの相対パス)
filePath : [
	'../data/data1.html',
	'../data/data2.html',
	'../data/data3.html',
	'../data/data4.html',
	'../data/data5.html'
	],
// ファイルの文字コード
fileCharset : [
	'utf-8',
	'euc-jp',
	'shift-jis',
	'',
	''
	]

"ファイルの文字コード" に何も指定しない場合は "サイトの文字コード(defaultCharset)" として認識される。
html 側で設定する "読み込ませるファイルに対応したクラス名" は "ファイルに対応するクラス" に一致する。
また、"ファイルに対応するクラス" と "ファイルの配置パス" 、"ファイルの文字コード" は、対応するファイルに対して要素の index を一致させる必要がある。

その他

PHP を使用できるサーバでしか動作しないことや、JSを切っているユーザに対する配慮など、多少の考慮すべき点が残っている...

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/68

コメント投稿フォーム