¿Alguien sabe cómo verificar si jquery se ha cargado (con javascript) y luego cárguelo si no se ha cargado?
algo como
if(!jQuery) {
//load jquery file
}
¿Alguien sabe cómo verificar si jquery se ha cargado (con javascript) y luego cárguelo si no se ha cargado?
algo como
if(!jQuery) {
//load jquery file
}
Respuestas:
Quizás algo como esto:
<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
elemento al que puede agregar un script
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( script );
Evite usar "if (! JQuery)" ya que IE devolverá el error: jQuery es 'indefinido'
En su lugar, use: 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>
También deberá verificar si JQuery se ha cargado después de agregarlo al encabezado. De lo contrario, tendrá que esperar al evento window.onload, que es más lento si la página tiene imágenes. Aquí hay un script de muestra que verifica si el archivo JQuery se ha cargado, ya que no tendrá la comodidad de poder usar $ (document) .ready (function ...
http://neighborhood.org/core/sample/jquery/append-to-head.htm
script.onload = function() { alert('jQuery loaded!'); }
? Funcionaría eso?
Método 1:
if (window.jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
Método 2:
if (typeof jQuery == 'undefined') {
// jQuery is not loaded
} else {
// jQuery is loaded
}
Si el archivo jquery.js no está cargado, podemos forzar la carga así:
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);
}
Prueba esto :
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
Esto verifica si jQuery está disponible o no, si no, agregará uno dinámicamente desde la ruta especificada.
Ref: Simular un "include_once" para jQuery
O
include_once equivalente a 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;
}
Aunque tenga un encabezado adjunto, es posible que no funcione en todos los navegadores. Este fue el único método que encontré que funcionaba de manera consistente.
<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
MUY mal visto?
Puede verificar si jQuery está cargado o no de muchas maneras, como:
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
}
Ahora, después de verificar si jQuery no está cargado, puede cargar jQuery así:
Aunque esta parte ha sido respondida por muchos en esta publicación, todavía responde por el bien de la integridad del código
// 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);
Publicación anterior, pero hice una buena solución que se prueba en lugares de servicio.
https://github.com/CreativForm/Load-jQuery-if-it-is-not-already-loaded
CÓDIGO:
(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($);
}));
En GitHub hay una mejor explicación, pero generalmente esta función puede agregarla en cualquier lugar de su código HTML e inicializará jquery si aún no está cargado.
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();
Estoy usando CDN para mi proyecto y, como parte del manejo de reserva, estaba usando el siguiente código,
<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>
Solo para verificar, eliminé la referencia CDN y ejecuté el código. Está roto y nunca se ingresó en el bucle if, ya que typeof jQuery viene como función en lugar de indefinido.
Esto se debe a la versión anterior almacenada en caché de jquery 1.6.1 que devuelve la función y rompe mi código porque estoy usando jquery 1.9.1. Como necesito la versión exacta de jquery, modifiqué el código como se muestra a continuación,
<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>