miya

JavaScriptで外部ファイルを読み込む

サイト共通で使用するヘッダーやフッター。全ファイルに同じソースを記述してもいいですが、
サイト管理を考えると外部ファイルで一元管理しておきたくなります。

通常はPHPやSSIを使いますが、環境によっては使えない場合があり、JavaScriptを選択する場合もあります。

document.writeで簡単に実装できますが、jQueryで使って外部ファイルを読み込むという方法もあります。

■headタグでjQueryを読みこんで、loadします。

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#include").load("include.html");
});
// -->
</script>

■外部ファイルを読み込ませたい場所に以下を記述。

sprinkle.jsやjquery.incを使ってもJavaScriptで簡単に外部ファイルを読み込む事ができます。

◎参考サイト

jQuery.jsを使ってhtmlを外部読み込み|スグラボ

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら