JavaScriptで外部HTMLをインクルードする

2014/07/27

複数のHTMLページに同じ内容のヘッダやフッタあるいはサイドメニューを付ける場合、それらのパーツのHTMLを外部ファイルとし、インクルードできれば便利だ。そしてJavaScriptでもそれが実現できることを知った。SEO上不利になるのが不安な点だが、最近はクローラも進歩してきたので問題ないといった記事も見かける。ajax(jQuery)を使ったものだとGoogleやYahooでインクルードされた外部ファイル内容も検索結果に出てくるようだ。

1. include.js

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

<div>
   <script type="text/javascript" >
      include("header.html"); 
   </script>
</div>

ローカルでもサーバーでもちゃんと動くのだが、Safari 5 でステータスバーにエラー表示が出た。

サンプル（実際に使ってみたページ。上部枠線内）
http://idqtl.freehostia.com/go/rule/ikeda/j_index.html

作者サイト
http://d.hatena.ne.jp/kenpoco/20080501/1209636103
作者はinclude.jsというライブラリ名を付けておられるわけではありません。

2. sprinkle.js

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

<div id=header src=head.html></div>

sample

こちらはローカルでは機能しないようだが、記述はいたってシンプル。

作者サイト：リンク切れ?、ソース

2. jqueryを使う

<script type = "text/javascript" src = "query-1.7.2.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $.ajaxSetup({cache:false}); //なくても良いがキャッシュを読み込まないように?
    $('#header').load('head.html');
  });
</script>

<div id="header"></div>

sample

（2015/08/28追記）少し汎用化してajaxというクラス名の要素にsrcというアトリビュートでファイルが指定されているとき、すべて読み込むように...

<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.ajaxSetup({cache:false}); //なくても良いがキャッシュを読み込まないように?
	$('.ajax').each(function(){
		var src = $(this).attr('src');
		if(src !=''){
			$(this).load(src);
		}
	});
});
</script>

<div id="header" class="ajax" src="head.html"></div>
<div id="footer" class="ajax" src="foot.html"></div>

sample2

ブラウザによってはローカルでは読み込まないのかもしれない。あと、ソースの記述が空divというのが引っかかるらしいが...

参照サイト
http://rukiadia.hatenablog.jp/entry/2014/06/11/005430
http://blog.looseknot.jp/html/js-include.html