読者です 読者をやめる 読者になる 読者になる

S_a_k_Uの日記みたいなDB

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

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

技術メモ JavaScript

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

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

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

いろいろバラバラなので、どういうシチュエーションで使うかよく考えんとおえんっぽい。
(4)のChromeで2回目OKなのは、1回目の外部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"); // (1)(2)(3)の外部JavaScriptファイルを読み込み
setLinkCss("linktest.css");
alert(getHoge());        // (1)

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());        // (2)
</script>
<button onclick="clickButton();">JS LINK TEST</button>
<script type="text/javascript">
function clickButton() {
    setLinkJs("linktest_fuga.js"); // (4)の外部JavaScriptファイルを読み込み
    alert(getHoge());    // (3)
    alert(getFuga());    // (4)
}
</script>
</body>
</html>

linktest_hoge.js

function getHoge() {
    return "HOGE";
}

linktest_fuga.js

function getFuga() {
    return "FUGA";
}

linktest.css

BODY { background-color: #ffff99 }

Chrome

(1)(2)はエラー

(3)はOKで(4)はエラー
 
2回目は(3)も(4)もOK
 

Firefox

(1)(2)はエラー

(3)(4)はOK
 

InternetExplorer

(1)はエラーで(2)はOK

(3)(4)はOK