背景
- 複数の画面で利用する関数を別ファイル化した
- html側では、htmlファイルと同じファイルのJavaScriptのみ読込みたい
（JavaScript側で、共通化したJavaScriptファイルを読込ませる）
コードv1
コード補足
1. 「test.html」の「head」で「test.js」を読込む
2. 「test.js」の「window.onload」イベントで、DOMを作成し「common.js」を読込む
3. 「common.js」の関数を呼び出し
結果
test.js:35 Uncaught ReferenceError: commonFunction is not defined
関数が定義されていないエラーが発生。
原因
「test.js」に記述した「common.js」を読み込ませるコードは、実際は「head」部分に「script src=...」を記述するコードだった。
そのため、「common.js」が読み込まれる前に「commonFunction()」が実行され、関数の未定義エラーになった。
コードv2
結果
Uncaught TypeError: Cannot read property 'appendChild' of null
at test.js:30'appendChild'を読み取れないエラーが発生。
原因
「body」が作成されていない状態で「body」要素に対し「appendChild」をしたため。
コードv3
結果
call commonFunction
余談
window.load と同じように「addEventListene」を使わない方法でも試してみたが、呼び出されなかった。
window.DOMContentLoaded = function(){
'use strict';
console.log('call DOMDOMDOM');
let el = document.createElement("script");
el.src = "common.js";
document.body.appendChild(el);
}下記参考サイトに「DOMContentLoaded」の動きに関する記述があったが理解できなかった。。
