はじめに

htmlでサイトを作っていて40ページ位になったのでメニュー更新増えるとめんどくさー。からの、phpかけないー。からの、最近勉強を初めたjsでメニュー読みこめばいいじゃん。です。いいんです、デザイナーとかじゃないので。
(調べてるうちにjsでやるあれじゃないよっていうのは百も承知で。)

最初に思いついたのはjQueryでhtml()

コードはざっくり書くとこんな感じ。

index.html


<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="./css/common.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="/manual/js/breadCrumb.js"></script>
  <title>title</title>
</head>
<body>
  中略
  <header>
    <div class="sidebar" id="sidebar">
      <script src="./js/inc_sidebar.js"></script>
    </div><!-- /sidebar -->
  </header>
  中略
</body>
</html>

で、jsはこんな感じ

inc_sideber.js

$(document).ready(function() {

  var html = "\
  <ul class=\"reset_mgpd\">\
          <li class=\"side_title center\">マニュアルメニュー</li>\
          <li class=\"side_m_title\"><span class=\"color_mark\">▼</span> マニュアルページトップ</li>\
          <li class=\"side_text\"><span class=\"color_mark\">-</span> <a href=\"/manual/index.html\">マニュアルページ トップ</a></li>\
  </ul>\
  ";
  // ↑メニュー的なやつ

  $('div#sidebar').html(html);
});

という感じで、jsにはヒアドキュメントっぽいのが無いとお聞きしていたのでエスケープしながら複数行のHTMLを変数に突っ込んでそいつを該当のIDに投げ込んでやるやつです。

意図した感じに読み込まれたんだけどIE8がマジで

タイトルそのまんまなんですけど、IE9以上は表示されて、FIREFOX,chrome,operaとか問題なく大丈夫。IE8だけほんとダメで、この直前にjQuery2系のせいか？（IE8以下をサポートしません宣言とかで）とおもったんですが、1系にしても普通にダメでした。私は2つのことを思いました。

「これはjQueryに頼らず書けって神様が言ってる」
「IE8さんぱねーっす、かっけーマジファック、まだシェア20%もあんのかよ」

jsオンリーで書いてみる

コード量が数行なので、jsオンリーでも問題ないだろうと思って。案の定特に行数は代わりませんでした。
htmlはさっきのからjquery部分を抜いただけなので割愛します。

inc_sidebar2.js


  var html = "\
  <ul class=\"reset_mgpd\">\
          <li class=\"side_title center\">マニュアルメニュー</li>\
          <li class=\"side_m_title\"><span class=\"color_mark\">▼</span> マニュアルページトップ</li>\
          <li class=\"side_text\"><span class=\"color_mark\">-</span> <a href=\"/manual/index.html\">マニュアルページ トップ</a></li>\
  </ul>\
  ";

  document.getElementById('sidebar').innerHTML = html;

こんなかんじになりまして、

・何か特に理由もなく使っていた$(document).readyのあたりがなくなった
・要素を探す$周辺がdocument.getElementByIdになった
・jQueryの.html()が.innerHTMLになった

なんかこれだけでIE8でも動いたので、やったー文明の勝利だーとなりました。
（今これを書いていて、もしかして$(document).readyが要らなかったじゃないかと思ってヒヤヒヤですが、まぁいいんです。）

余談

ちなみにjsでincludeしないほうがいいんじゃないか説ですが

・SEO的にコードがそのまま残る書き方だと考慮してくれるとは言え弱くなると聞いた
・jsだとクライアント任せになるので実行されない設定だと詰む
・何かよくわからないですけどSSIが良さそうです。

あとで書き直すかもしれませんが、私からは以上です。

jsでhtmlをincludeするやつ

はじめに

最初に思いついたのはjQueryでhtml()

意図した感じに読み込まれたんだけどIE8がマジで

jsオンリーで書いてみる

余談