phpもssiも使えないs3環境でhtmlの共通化するためにjavascriptでインクルードした

初めてs3環境使ったけどphpもssiも使えないんだね。
phpインクルードでヘッダー・フッターのhtmlを共通化してたもんだから、javascriptで共通化することにしました。

document.write()でやってみたら、html全体が出力内容になってしまったので$.ajaxでhtmlを読み込んでinsertAdjacentHTML()で出力する方法でやりました。

関数用意して、挿入したい場所で

<script>inc_header();</script>

で呼び出します。

function inc_header(){
    $.ajax({
        url: "/include/inc_header.html",
        cache: false,
        success: function(html){
            document.querySelector('.l-container').insertAdjacentHTML('afterbegin', html);
        }
    });
}
function inc_footer(){
    $.ajax({
        url: "/include/inc_footer.html",
        cache: false,
        success: function(html){
            document.querySelector('.l-container').insertAdjacentHTML('beforeend', html);
        }
    });
}

insertAdjacentHTMLで任意の場所に挿入する

inserrtAdjacentHTMLは、positionを指定して任意の場所に挿入できます。

element.insertAdjacentHTML(position, html);

追加場所のpositionは、

phpもssiも使えない案件、たまにあるからそんな時はjavascriptで共通化インクルードですね。

インクルードした要素にjsで制御する要素があると挙動不審

ただし、javascriptのインクルードでは問題があります。
インクルードした要素にjsで制御する要素があると読み込みのタイムラグがあるため、挙動があやしくなります。
例えば、ヘッダーをインクルードしていて設置したハンバーガーメニューが開いたり開かなかったり。。。これは、ハンバーガーメニューのクリックイベントの設定が実行された後にhtml要素がjsで読み込まれてしまうためと考えられます。

解決策としては、インクルードするhtmlファイルにjs処理も記述してしまえばよいでしょう。