5

jQueryを使用する外部ウィジェットを作成していますが、ユーザーに個別に含めるのではなく、ロードされているかどうかを確認し、ロードされていない場合は動的にロードしたいと思います。

問題は、残りのスクリプトを実行するためにロードされるまで待つ必要があることです。これには、IE と FF/Chrome で異なる方法で処理されるイベント ハンドラーが必要です。

これを行うと、IE8 で正常に動作します。

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {
    document.getElementsByTagName('head')[0].appendChild(s);
    $('#test').css('font-size', '50px');

}
</script>

しかし、それはChromeでは機能しません。ただし、以前にスクリプトを追加すると、Chrome では機能しますが、IE では機能しません。

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(s);
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {

    $('#test').css('font-size', '50px');

}
</script>

IE と Chrome の両方で動作するイベント ハンドラーを使用して jQuery を動的に読み込む方法についてのアイデアはありますか?

編集: appendChild ターゲットをテストからヘッドに変更しました。

4

1 に答える 1

1

最初のコードでは、完了時に呼び出している関数にスクリプトを追加しています!

そして、テストとはどのような要素ですか？

document.getElementsByTagName('test')[0].appendChild(s);  <-- looking for element
<div id="test">  <-- test is an id

コードは次のようになります

if (typeof jQuery == 'undefined') {
    var s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }
    document.getElementsByTagName('head')[0].appendChild(s);
} else {
    runScript();
}

function runScript() {
    $('#test').css('font-size', '50px');
}

実行例: http://jsfiddle.net/5986T/

于 2012-12-26T18:04:43.290 に答える