periksa apakah jquery telah dimuat, lalu muat jika salah

117

Adakah yang tahu bagaimana cara memeriksa apakah jquery telah dimuat (dengan javascript) kemudian memuatnya jika belum dimuat.

sesuatu seperti

if(!jQuery) {
    //load jquery file
}
tujuh belas
sumber
1
terimakasih atas peringatannya! mudah-mudahan tidak perlu dipanggil. hanya mencoba menambahkan sedikit redundansi
tujuh belas

Jawaban:

166

Mungkin sesuatu seperti ini:

<script>
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "path/to/jQuery";
   document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
Daniel LeCheminant
sumber
5
Perhatikan bahwa ini mengasumsikan bahwa dokumen memiliki headyang dapat menambahkan elemen skrip ke
Daniel LeCheminant
1
@DanielLeCheminant poin bagus tentang itu. Bagaimana jika itu( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( script );
pawelglow
3
@Pawel Saya telah melihat beberapa implementasi menyisipkan elemen sebelum / sesudah tag skrip pertama, karena Anda tahu pasti ada salah satunya.
Daniel LeCheminant
Saya yakin menambahkan tag skrip ke body berfungsi di semua browser.
Steven Lu
3
Jadi, sebagai kesimpulan; metode teraman adalah: (document.getElementsByTagName ('head') [0] || document.getElementsByTagName ('script') [0]) .appendChild (script); Karena setidaknya akan ada satu contoh tag skrip.
tormuto
106

Hindari menggunakan "if (! JQuery)" karena IE akan mengembalikan kesalahan: jQuery is 'undefined'

Sebagai gantinya gunakan: if (typeof jQuery == 'undefined')

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

Anda juga perlu memeriksa apakah JQuery telah dimuat setelah menambahkannya ke header. Jika tidak, Anda harus menunggu acara window.onload, yang lebih lambat jika halaman memiliki gambar. Berikut ini contoh skrip yang memeriksa apakah file JQuery telah dimuat, karena Anda tidak akan memiliki kenyamanan untuk dapat menggunakan $ (document) .ready (function ...

http://ne Neighborhood.org/core/sample/jquery/append-to-head.htm

Loren
sumber
Tentang apa script.onload = function() { alert('jQuery loaded!'); }? Apakah itu akan berhasil?
robsch
14

Metode 1:

if (window.jQuery) {  
    // jQuery is loaded  
} else {
    // jQuery is not loaded
}

Metode 2:

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded
} else {
    // jQuery is loaded
}

Jika file jquery.js tidak dimuat, kita dapat memaksa memuatnya seperti ini:

if (!window.jQuery) {
  var jq = document.createElement('script'); jq.type = 'text/javascript';
  // Path to jquery.js file, eg. Google hosted version
  jq.src = '/path-to-your/jquery.min.js';
  document.getElementsByTagName('head')[0].appendChild(jq);
}
miksiii
sumber
8

Coba ini :

<script>
  window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

Ini memeriksa apakah jQuery tersedia atau tidak, jika tidak itu akan menambahkan satu secara dinamis dari jalur yang ditentukan.

Ref: Simulasikan "include_once" untuk jQuery

ATAU

include_once setara dengan js. Ref: https://raw.github.com/kvz/phpjs/master/functions/language/include_once.js

function include_once (filename) {
  // http://kevin.vanzonneveld.net
  // +   original by: Legaev Andrey
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Michael White (http://getsprink.com)
  // +      input by: Brett Zamir (http://brett-zamir.me)
  // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Brett Zamir (http://brett-zamir.me)
  // -    depends on: include
  // %        note 1: Uses global: php_js to keep track of included files (though private static variable in namespaced version)
  // *     example 1: include_once('http://www.phpjs.org/js/phpjs/_supporters/pj_test_supportfile_2.js');
  // *     returns 1: true
  var cur_file = {};
  cur_file[this.window.location.href] = 1;

  // BEGIN STATIC
  try { // We can't try to access on window, since it might not exist in some environments, and if we use "this.window"
    //    we risk adding another copy if different window objects are associated with the namespaced object
    php_js_shared; // Will be private static variable in namespaced version or global in non-namespaced
    //   version since we wish to share this across all instances
  } catch (e) {
    php_js_shared = {};
  }
  // END STATIC
  if (!php_js_shared.includes) {
    php_js_shared.includes = cur_file;
  }
  if (!php_js_shared.includes[filename]) {
    if (this.include(filename)) {
      return true;
    }
  } else {
    return true;
  }
  return false;
}
Prasanth Bendra
sumber
2

Meskipun Anda mungkin memiliki kepala yang menambahkannya mungkin tidak berfungsi di semua browser. Ini adalah satu-satunya metode yang saya temukan untuk bekerja secara konsisten.

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
  document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"><\/script>');        
  } 
</script>
chrisrth
sumber
2
Bukankah document.write SANGAT disukai?
Carcigenicate
1

Anda dapat memeriksa apakah jQuery dimuat atau tidak dengan banyak cara seperti:

if (typeof jQuery == 'undefined') {

    // jQuery IS NOT loaded, do stuff here.

}


if (typeof jQuery == 'function')
//or
if (typeof $== 'function')


if (jQuery) {
    // This will throw an error in STRICT MODE if jQuery is not loaded, so don't use if using strict mode
    alert("jquery is loaded");
} else {
    alert("Not loaded");
}


if( 'jQuery' in window ) {
    // Do Stuff
}

Sekarang setelah memeriksa apakah jQuery tidak dimuat, Anda dapat memuat jQuery seperti ini:

Walaupun bagian ini sudah banyak dijawab pada postingan kali ini namun tetap dijawab demi kelengkapan kodenya


    // This part should be inside your IF condition when you do not find jQuery loaded
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://code.jquery.com/jquery-3.3.1.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
Tushar Shukla
sumber
1

Posting lama tapi saya membuat solusi yang baik apa yang diuji di tempat serval.

https://github.com/CreativForm/Load-jQuery-if-it-is-not-already-loaded

KODE:

(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($);
}));

Di GitHub ada penjelasan yang lebih baik tetapi secara umum fungsi ini dapat Anda tambahkan di mana saja di kode HTML Anda dan Anda akan menginisialisasi jquery jika belum dimuat.

Ivijan Stefan Stipić
sumber
0
var f = ()=>{
    if (!window.jQuery) {
        var e = document.createElement('script');
        e.src = "https://code.jquery.com/jquery-3.2.1.min.js";
        e.onload = function () {
            jQuery.noConflict();
            console.log('jQuery ' + jQuery.fn.jquery + ' injected.');
        };
        document.head.appendChild(e);
    } else {
        console.log('jQuery ' + jQuery.fn.jquery + '');
    }
};
f();
Peter Song
sumber
Anda harus menambahkan beberapa komentar pada kode Anda untuk menjelaskannya.
Ebrahim Poursadeqi
0
<script>
if (typeof(jQuery) == 'undefined'){
        document.write('<scr' + 'ipt type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></scr' + 'ipt>');
}
</script>
Michael
sumber
-1

Saya menggunakan CDN untuk proyek saya dan sebagai bagian dari penanganan fallback, saya menggunakan kode di bawah ini,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
                if ((typeof jQuery == 'undefined')) {
                    document.write(unescape("%3Cscript src='/Responsive/Scripts/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));   
                }
</script>

Hanya untuk memverifikasi, saya menghapus referensi CDN dan menjalankan kodenya. Ini rusak dan tidak pernah masuk ke loop jika tipe jQuery datang sebagai fungsi alih-alih tidak ditentukan.

Ini karena versi cache jquery 1.6.1 yang lebih lama yang mengembalikan fungsi dan memecahkan kode saya karena saya menggunakan jquery 1.9.1. Karena saya membutuhkan versi jquery yang tepat, saya memodifikasi kode seperti di bawah ini,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
            if ((typeof jQuery == 'undefined') || (jQuery.fn.jquery != "1.9.1")) {
                document.write(unescape("%3Cscript src='/Responsive/Scripts/jquery-1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));   
            }
</script>
Sachin Kadam
sumber