過去ネタ供養 3 : ページ読み込み時に必ず初期処理の関数を実行する JS コード片
この過去記事の中で、ページ内のルート相対パスを絶対パスに書き換える強引な JavaScript コードを書いて紹介している。そのコードの中で使っている関数の抜粋。
この JS がどんなタイミングで読み込まれても、exec() 関数を必ずページ読み込み時に実行するというコードスニペットだ。
(() => {
// 初期処理としてやりたいことを実装しておく
const exec = () => {
console.log('Something');
};
if(!document.readyState || document.readyState === 'interactive') {
console.log('Interactive (onload)');
window.addEventListener('load', exec);
}
else if(document.readyState === 'loading') {
console.log('DOMContentLoaded');
document.addEventListener('DOMContentLoaded', exec);
}
else {
console.log('Immediately');
exec();
}
})();
この JS ファイルの読み込み方によっては、JS ファイルの読み込み完了時点で DOMContentLoaded イベントが終わっていて、document.addEventListener('DOMContentLoaded') でイベント登録しても発火しないことがあったりする。
そこで document.readyState を見て、イベント登録するか、その場で実行するか、といったハンドリングをしているというワケ。
