#検証済
Ubuntu-20.04 LTS + apacheで動作確認済み。
#1. jQuery の読み込み
各<head>タグ内に以下を記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
#2. javascript関数の作成
以下のコードを書いたjavascriptファイルを作ります。
idnameにはid属性の名前を書きます。
pathには読み込みたいhtmlファイルを書きます。
ファイル名は html-to-id.js にしました。
const addHtmlToId = function (idname, path) {
$(function () {
$.ajaxSetup({
cache: false
});
$(idname).load(path);
});
}
#3. idの名前を決める
複数のhtmlファイルで参照する場合は、それぞれ参照するファイルのパスが微妙に違ったりするので各htmlで設定できるようにします。そこで上記で作ったファイル内にidの名前を変数として定義します。今回は以下の名前で記述していきます
let headerAreaName = "#header-data";
let footerAreaName = "#footer-data";
#4.読み込む準備
各headタグ内に以下のコードを記述してファイル内でhtmlを読み込めるようにします。
第２引数に読み込むhtmlファイルのパスを入力していきます。
<script type="text/javascript" src="html-to-id.js"></script>
<script>
addHtmlToId(headerAreaName, "header.html");
addHtmlToId(footerAreaName, "footer.html");
</script>
#5. 使う
準備が整ったので、使用したい場所に<div>タグとid属性を使って入れ込みます。
<div id="header-data"></div>
<div id="footer-data"></div>
各divタグ内に読み込みたいhtmlファイルの内容が書き込まれるので、ほかのプロパティを適用したい場合は<div>で囲ってあげるか、class 属性で指定してあげるとできます。
#6. 複数使いたい場合 [未検証]
単一ファイル内で一つの読み込んだファイルを複数使いたい場合は、idの名前を複数作り、読み込む準備のところで、その名前を使って同じファイルを指定してあげるとおそらくできます。
let headerAreaName1 = "#header1-data";
let headerAreaName2 = "#header2-data";
let footerAreaName = "#footer-data";
<script type="text/javascript" src="html-to-id.js"></script>
<script>
addHtmlToId(headerAreaName1, "header.html");
addHtmlToId(headerAreaName2, "header.html");
addHtmlToId(footerAreaName, "footer.html");
</script>
#7. 内部参照エラーは検証済み
breaketsのライブプレビューでは正しく表示されますが、ローカルファイルをウェブブラウザで開くと内部参照エラーなります。
ですが、サーバーに移すと正しく動作します。
#参考サイト