web-dev-qa-db-ja.com

jQueryがまだロードされていない場合、どのようにロードできますか？

initializor.jsには次のものが含まれています。

if(typeof jQuery=='undefined')
{
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'jquery.js';
    headTag.appendChild(jqTag);
}

そのファイルを別のページのどこかに含めています。コードは、jQueryがロードされているかどうかを確認し、ロードされていない場合は、Headタグに追加します。

ただし、メインドキュメントでは、これをテストするためにいくつかのイベントが宣言されているため、jQueryは初期化されていません。また、チェックの下にjQueryコードをいくつか書いてみましたが、Firebugは「jQueryは未定義です」と言っていました。これを行う方法はありますか？ Firebugは、headタグ内にjquery包含タグを表示します！

また、コードを動的に$（document）.ready（）イベントに追加できますか？または、いくつかのClickイベントをいくつかの要素に追加するだけでよいのではないでしょうか？

javascriptjquerydynamic
34
Jeff

jQueryは非同期でロードしているため、すぐに使用できません（<head>）。 onloadリスナーをスクリプト（jqTag）に追加して、いつロードするかを検出し、コードを実行する必要があります。

例えば.

function myJQueryCode() {
    //Do stuff with jQuery
}

if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'jquery.js';
    jqTag.onload = myJQueryCode;
    headTag.appendChild(jqTag);
} else {
     myJQueryCode();
}
46
Adam Heath

JQueryを含めるには、これを使用する必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js">\x3C/script>')</script>

Google CDN を使用しますが、フォールバックを提供し、プロトコル相対URLを持ちます。

注：バージョン番号を必ず最新バージョンに変更してください

if window.jQueryが定義されている場合、それは行であるか、すでにtrue値を含んでいるので、行を読み続けません。
参照： theHTML5Boilerplate

また、jQueryが定義されていない場合、引用符を忘れていました。

typeof window.jQuery === "undefined" //true
typeof window.jQuery == undefined //false ,this is wrong

あなたもできる：

window.jQuery === undefined //true
29
beardhatcode

リファクタリング Adam Heathの答え （読みやすいIMO）。結論として、jQueryの読み込みが完了した後にjQueryコードを実行する必要があります。

jQueryCode = function(){
    // your jQuery code
}

if(window.jQuery)  jQueryCode();
else{   
    var script = document.createElement('script'); 
    document.head.appendChild(script);  
    script.type = 'text/javascript';
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";

    script.onload = jQueryCode;
}

または、コードの順序を変更する関数でラップすることもできます

function runWithJQuery(jQueryCode){
    if(window.jQuery)  jQueryCode();
    else{   
        var script = document.createElement('script'); 
        document.head.appendChild(script);  
        script.type = 'text/javascript';
        script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
        script.onload = jQueryCode;
    }
}
runWithJQuery(function jQueryCode(){
    // your jQuery code
})

または、非同期関数を使用している場合は、代わりにawaitを使用できます

if(!window.jQuery){
    var script = document.createElement('script');
    document.head.appendChild(script);
    script.type = 'text/javascript';
    script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
    await script.onload
}
// your jQuery code here
9
aljgom

YepNopeローダーは、条件付きでスクリプトをロードするために使用でき、非常にニースで読みやすい構文があり、彼らのWebサイトにこの例があります。

彼らのウェブサイト から入手できます。

彼らのウェブサイトから取られた例：

 yepnope([{
   load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
   complete: function () {
     if (!window.jQuery) {
       yepnope('local/jquery.min.js');
     }
   }
 }
2
Steve Elliott

これは古い投稿ですが、さまざまな場所でテストされた1つの実行可能なソリューションを作成します。

コードはこちらです

<script type="text/javascript">
    (function(url, position, callback){
        // default values
        url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
        position = position || 0;

        // Check is jQuery exists
        if (!window.jQuery) {
            // Initialize <head>
            var head = document.getElementsByTagName('head')[0];
            // Create <script> element
            var script = document.createElement("script");
            // Append URL
            script.src = url;
            // Append type
            script.type = 'text/javascript';
            // Append script to <head>
            head.appendChild(script);
            // Move script on proper position
            head.insertBefore(script,head.childNodes[position]);

            script.onload = function(){
                if(typeof callback == 'function') {
                    callback(jQuery);
                }
            };
        } else {
            if(typeof callback == 'function') {
                callback(jQuery);
            }
        }
    }('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){ 
        console.log($);
    }));
</script>

見つけることができる説明 [〜＃〜] here [〜＃〜] 。

0
Ivijan Stefan Stipić

このサイトコードは私の問題を解決します。

function loadjQuery(url, success){
     var script = document.createElement('script');
     script.src = url;
     var head = document.getElementsByTagName('head')[0],
     done = false;
     head.appendChild(script);
     // Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
         done = true;
         success();
         script.onload = script.onreadystatechange = null;
         head.removeChild(script);        
    }
};
}
 if (typeof jQuery == 'undefined'){

loadjQuery('http://code.jquery.com/jquery-1.10.2.min.js', function() {
        // Write your jQuery Code
       });
 } else { 
  // jQuery was already loaded
 // Write your jQuery Code
 }

http://99webtools.com/blog/load-jquery-if-not-already-loaded/

0
Fatih Hayrioğlu