NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2011.07.11

静的HTMLでHTMLファイルを読み込む

まっちー

PHPでページを生成する場合は、共通部分は別のファイルに作って、そいつをincludeなりrequireなりしてあげれば簡単なんですけど、HTMLファイルの場合はそうはいかない。SSIが使えるサーバーとかだと以下のような記述で読み込めるらしいけど、SSIが使えない場合もたまにはあるわけで、そういうときにどうすればいいか。

//SSIが使える場合
<!--#include file="sample.html"-->

そこでご紹介したいのが、こちらのサイトさん

Javascriptを使って、静的HTMLの中でファイルをインクルードするソースを公開されています。

使い方は簡単。上記のサイトにある関数を記述したjsファイルを作成するなりHTML内に書くなりして、あとは必要な部分で関数を呼び出すだけ。

//~内

include("sample.html");

たったこれだけです。ヘッダーとかフッターとか、全ページで共通して表示させるような部分をこれで外部ファイルにしておけば、静的ページの作成も楽になりますね。

今までは、共通部分を一ヶ所直すたびに全ファイルを直すとかいう効率の悪いことをしてたんですけど、今度からはこれで行かせていただこうとを思います。

むしろもっと早くに調べとくんだったよ……バカ。

注:ブラウザによっては動かない場合もあるっぽいです。僕の使ってるOperaでは動かなかった。他にもformが動かないなどの報告もあるみたいなので、運用レベルでの使用ではなく、モックの作成などに活用するのが良いかもしれません。

あるいはこのソースを改良して動くようにするとか、でしょうか。