msg
Web制作
まっちーまっちー
  • このエントリーをはてなブックマークに追加

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

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

//SSIが使える場合

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

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

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

//~内

include(“sample.html”);

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

エンタメウス

この記事を書いた人他のメンバーを見る

まっちー  

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

まっちー

LIGの2代目広報担当ひろゆきからのお知らせを受け取る方法

ジェイ

まいどおおきに。俺の名前は大田ひろゆき。LIGの広報担当や。FacebookとかTwitterとかメルマガで、皆にメッセージを届けさせてもらうで。ほんまに。 あと俺の発信する情報はLIGからの公式メッセージやと思ってもらってかまへんから。ってか公式のメッセージやわな。下にある「いいね!」を押すか、twitterをフォローして俺の情報を逃さんようにしてな。 メールマガジンの登録もめっちゃ簡単やから、おすすめやで~

twitter

LIGの事つぶやいてんの見つけたら速攻でフォローするで!

mail magazine

メルマガ登録はこちら

人類史上、例を見いひんくらいのしょうもないやつ配信するわ。

RSS

RSSを登録する

記事は毎日2本更新する予定や!RSSの登録をすると便利やで。

facebook