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

まっちー

まっちー

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

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

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

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

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

//~内

include("sample.html");

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

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

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

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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

プログラマのまっちーです。酒が大好きです。ある一定量のお酒を飲むと壊れたレディオモードに入り、同じことを繰り返す癖があります。宜しくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL