[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
コメント投稿フォーム