開始タグ

今回は趣向を変えて現在の実務で行ったことを書いてみます。
初めて経験したので少しでも詰まっている誰かのためになればと思います。

使用するきっかけ

普段はphpでのインクルードする場合がメイン。
ですがお客様のサーバーがPHPを使用できず、SSI・DWのライブラリ運用はお互い避けたいということで、Javascriptでの共通パーツ運用を行うことになりました。

方法

今回は「ajax」を使用してページ内へ読み込みました。

※最初はJQueryの「.load」を使用していましたが、上手くいかなかったので破棄。

１、まず、共通パーツ化したい箇所を、新たに作成したhtmlファイルに記述します。

２、次にJSファイルに以下の記述を行います。（今回はheader.htmlを読み込む場合です。）

sample.js

	$.ajaxSetup({
		type: "POST",
		dataType: "html",
		timeout: 11000,
		cache: false
		}
	});

	$.ajax({
		url: "/common/inc/header.html",
		success: function(data) {
			$("#header").html($(data));
		}
	});

$.ajaxSetup内で、ajaxの初期共通設定を行いますよー、
#headerに読み込みますよー、てな感じ。

ここで大切なのはcache: false。
例えばheaderのハンバーガーメニューなど共通パーツの中でJSを扱う場合、JSが効かない現象が起こるので設定しておくといいです。（IE個性的すぎるよ・・・）

IEのajaxに関する仕様で、一度キャッシュされると次回以降もキャッシュが残った状態で表示されてしまうので、JSが効かなくなるのだとか・・・。

※上記のコードの前は省略形で書くパターンでしたが、IE11だとエラーが出てしまうので正式な書き方がベターです。

alert("問題発生！");

それでもajaxで読み込んでいる共通パーツ部分のJSが効かない・・・ということであれば、以下を試してください。

sample.js

$(window).on("load", function() {
  // 処理内容
});

これを使用することで、画像など含めページが完全に表示された状態＝ajaxが実行された後に処理を行うので、JSが効くようになります。

と、これで一件落着かと思いきや、clickイベントの場合は動かない・・・という状況もあるでしょう。（というか自分なりました。）
その場合は以下のように記述してあげてください。

sample.js

$(document).on("click", "要素やid、class名", function() {
});

このように記述してあげると、バッチリJSが動くようになります。（自分はなりました！）

閉じタグ

というわけで、ざっくり言えば「細かく書く」「読み込み順」に気をつけてあげればajaxを使用してページ内へ共通パーツを読み込むのはできちゃいます。
軽微なものではありますが、「やってみる」って大事ですよね。