S_a_k_Uの日記みたいなDB

～サクゥーと呼ばないで～

動的に外部のJavaScriptファイルを読み込む場合の動作

技術メモ JavaScript

ブラウザによって動作が異なるのでメモ。
Chrome バージョン 34.0.1847.137 m
Firefox 29.0.1
InternetExplorer 9.0.8112.16421

下記の動作をそれぞれのブラウザで確認してみた。

（１） HTMLロード時に、外部JavaScriptファイルの読み込みと同じscriptタグの中でメソッドを呼び出す
（２） HTMLロード時に、外部JavaScriptファイルを読み込んだ後のscriptタグの中でメソッドを呼び出す
（３） ボタンのクリックイベント時に、HTMLロード時読み込んだ外部JavaScriptファイルのメソッドを呼び出す
（４） ボタンのクリックイベント時に、外部JavaScriptファイルの読み込みと同じメソッド内でメソッドを呼び出す
　 Chrome Firefox InternetExplorer
（１） エラー エラー エラー
（２） エラー エラー OK
（３） OK OK OK
（４） エラー（但し２回目はOK） OK OK

いろいろバラバラなので、どういうシチュエーションで使うかよく考えんとおえんっぽい。
（４）のChromeで２回目OKなのは、１回目の外部JavaScript読み込みが効いてると思われる。


同時に動的に外部のスタイルシートファイルを読み込む場合も確認してみたけど、スタイルシートはChrome/Firefox/InternetExplorerで即時に適用されてる。

検証コード

linktest.html

<!doctype html>
<html lang="ja">
<head>
<title>Link Test</title>
</head>
<body>
<script type="text/javascript">
setLinkJs("linktest_hoge.js");　// （１）（２）（３）の外部JavaScriptファイルを読み込み
setLinkCss("linktest.css");
alert(getHoge());        // （１）

function setLinkJs(filename) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "./" + filename);
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
}

function setLinkCss(filename) {
    var link = document.createElement('link');
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", "./" + filename);
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
</script>
<script type="text/javascript">
alert(getHoge());        // （２）
</script>
<button onclick="clickButton();">JS LINK TEST</button>
<script type="text/javascript">
function clickButton() {
    setLinkJs("linktest_fuga.js");　// （４）の外部JavaScriptファイルを読み込み
    alert(getHoge());    // （３）
    alert(getFuga());    // （４）
}
</script>
</body>
</html>

linktest_hoge.js

function getHoge() {
    return "HOGE";
}

linktest_fuga.js

function getFuga() {
    return "FUGA";
}

linktest.css

BODY { background-color: #ffff99 }

Chrome

（１）（２）はエラー

（３）はOKで（４）はエラー
　
２回目は（３）も（４）もOK
　

Firefox

（１）（２）はエラー

（３）（４）はOK
　

InternetExplorer

（１）はエラーで（２）はOK

（３）（４）はOK