Weiß jemand, wie man prüft, ob jquery geladen wurde (mit Javascript) und es dann lädt, wenn es nicht geladen wurde.
etwas wie
if(!jQuery) {
//load jquery file
}
Weiß jemand, wie man prüft, ob jquery geladen wurde (mit Javascript) und es dann lädt, wenn es nicht geladen wurde.
etwas wie
if(!jQuery) {
//load jquery file
}
Antworten:
Vielleicht so etwas:
<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>
head
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( script );
Vermeiden Sie die Verwendung von "if (! JQuery)", da der IE den Fehler zurückgibt: jQuery ist 'undefiniert'
Verwenden Sie stattdessen: 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>
Sie müssen auch überprüfen, ob die JQuery geladen wurde, nachdem Sie sie an den Header angehängt haben. Andernfalls müssen Sie auf das Ereignis window.onload warten, das langsamer ist, wenn die Seite Bilder enthält. Hier ist ein Beispielskript, das prüft, ob die JQuery-Datei geladen wurde, da Sie nicht die Möglichkeit haben, $ (document) .ready (function ...
http://neighborhood.org/core/sample/jquery/append-to-head.htm
script.onload = function() { alert('jQuery loaded!'); }? Funktioniert das?
Methode 1:
if (window.jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
Methode 2:
if (typeof jQuery == 'undefined') {
// jQuery is not loaded
} else {
// jQuery is loaded
}
Wenn die Datei jquery.js nicht geladen ist, können wir das Laden wie folgt erzwingen:
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);
}
Versuche dies :
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
Dies prüft, ob jQuery verfügbar ist oder nicht. Wenn nicht, wird dynamisch eine aus dem angegebenen Pfad hinzugefügt.
Ref: Simulieren Sie ein "include_once" für jQuery
ODER
include_once-Äquivalent für 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;
}
Auch wenn Sie möglicherweise einen Kopf anhängen, funktioniert dies möglicherweise nicht in allen Browsern. Dies war die einzige Methode, mit der ich konsequent arbeiten konnte.
<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>
document.write HIGHLY verpönt?
Sie können auf viele Arten überprüfen, ob jQuery geladen ist oder nicht, z.
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
}
Nachdem Sie überprüft haben, ob jQuery nicht geladen ist, können Sie jQuery wie folgt laden:
Obwohl dieser Teil von vielen in diesem Beitrag beantwortet wurde, antwortet er der Vollständigkeit halber immer noch
// 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);
Alter Beitrag, aber ich habe eine gute Lösung gefunden, was an mehreren Orten getestet wird.
https://github.com/CreativForm/Load-jQuery-if-it-is-not-already-loaded
CODE:
(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($);
}));
Bei GitHub gibt es eine bessere Erklärung, aber im Allgemeinen können Sie diese Funktion an einer beliebigen Stelle in Ihrem HTML-Code hinzufügen und jquery initialisieren, wenn sie noch nicht geladen ist.
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();
Ich verwende CDN für mein Projekt und als Teil der Fallback-Behandlung habe ich den folgenden Code verwendet:
<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>
Um dies zu überprüfen, habe ich die CDN-Referenz entfernt und den Code ausgeführt. Es ist kaputt und wird nie eingegeben, wenn die Schleife als Typ von jQuery als Funktion kommt anstelle von undefiniert kommt.
Dies liegt an der zwischengespeicherten älteren Version von jquery 1.6.1, die die Funktion zurückgibt und meinen Code beschädigt, weil ich jquery 1.9.1 verwende. Da ich eine genaue Version von jquery benötige, habe ich den Code wie folgt geändert:
<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>