Проверка, загружен ли jquery с использованием Javascript
Я пытаюсь проверить, загружена ли моя библиотека Jquery на мою HTML-страницу. Я проверяю, работает ли это, но что-то не так. Вот что у меня есть:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/query-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if (jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
});
</script>
12 ответов
что-то неправильно
Ну, вы используете jQuery для проверки наличия jQuery. Если jQuery не загружен, то $() даже не будет работать вообще, и ваш обратный вызов не будет выполнен, если вы не используете другую библиотеку, и эта библиотека, как оказалось, совместно использует $() синтаксис.
Удалить свой $(document).ready() (используйте что-то вроде window.onload вместо):
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
По этой ссылке:
if (typeof jQuery == 'undefined') {
// jQuery IS NOT loaded, do stuff here.
}
в комментариях есть еще несколько ссылок, например,
if (typeof jQuery == 'function')
//or
if (typeof $== 'function')
а также
if (jQuery) {
alert("jquery is loaded");
} else {
alert("Not loaded");
}
Надеюсь, что это охватывает все хорошие способы сделать это!
if ('undefined' == typeof window.jQuery) {
// jQuery not present
} else {
// jQuery present
}
Вы можете сделать это быстро на вкладке консоли при проверке вашей веб-страницы.
Например:
$ === jQuery
Если он вернется true это означает, что он загружен.
Просто небольшая модификация, которая может решить проблему:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
location.reload();
}
}
Вместо $(document).Ready(function() использование window.onload = function(),
ВНИМАНИЕ: не используйте jQuery для тестирования вашего jQuery.
Когда вы используете какой-либо код, предоставленный другими пользователями, и если вы хотите отображать сообщение в своем окне, а не в alert или console.log, Затем убедитесь, что вы используете javascript, а не jquery.
Не все хотят использовать alert или console.log
alert('jquery is working');
console.log('jquery is working');
Приведенный ниже код не сможет отобразить сообщение,
потому что мы используем jquery внутриelse (как, черт возьми, сообщение отображается на вашем экране, если у вас нет jquery)
if ('undefined' == typeof window.jQuery) {
$('#selector').appendTo('jquery is NOT working');
} else {
$('#selector').appendTo('jquery is working');
}
Вместо этого используйте JavaScript
if ('undefined' == typeof window.jQuery) {
document.getElementById('selector').innerHTML = "jquery is NOT working";
} else {
document.getElementById('selector').innerHTML = "jquery is working";
}
Если jQuery загружается асинхронно, вы можете дождаться его определения, проверяя его каждый период времени:
(function() {
var a = setInterval( function() {
if ( typeof window.jQuery === 'undefined' ) {
return;
}
clearInterval( a );
console.log( 'jQuery is loaded' ); // call your function with jQuery instead of this
}, 500 );
})();
Этот метод можно использовать для любой переменной, ожидающей вашего появления.
Вы можете проверить, существует ли он, и, если он не существует, загрузить его динамически.
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
async function load(){
if (!window.jQuery){
await loadScript(`https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js`);
}
console.log(jQuery);
}
load();
Ниже представлен универсальный кроссбраузерный загрузчик JQuery. Он проверяет, полностью ли загружены DOM, HTML, CSS, файлы и ресурсы документа, а также был ли проанализирован и запущен сам файл JQuery. Эта программа проверки работает в старых браузерах и поддерживает старый Internet Explorer (v. 4-11), а также различные пользовательские агенты, начиная с 2001 года. Она ограничена только различными версиями самого JQuery, которые не содержат ошибок в этих браузерах. К сожалению, многие - нет.
Имейте в виду, что вы не можете запускать сценарии, основанные на JQuery, до тех пор, пока файлы JQuery и любые используемые ресурсы не будут загружены, проанализированы и скомпилированы JIT. Вы также можете использовать приведенный ниже код, чтобы проверить, обрабатывается ли DOM на ранней стадии в браузере до загрузки других ресурсов, и запустить ранние сценарии, отличные от JQuery, для работы с DOM. Первая функция ниже демонстрирует эту особенность. Это предполагает, что построена только модель DOM, а многие файлы CSS, изображений и JavaScript все еще не загружены. Это полезно, если вам нужно загружать отложенные скрипты раньше, чем JQuery и другие библиотеки, и по какой-то причине манипулировать DOM.
// EARLY JAVASCRIPT DOM PROCESSING (non-JQuery)
// Function to run as soon as the HTML is parsed and DOM rendered.
function DOMStart(state) {
if (state == null) {
state = "Unknown";
}
alert('DOM State: ' + state);
};
// FULLY LOADED WINDOW/DOCUMENT JAVASCRIPT PROCESSING, plus JQUERY CHECK
// TEST IF JQUERY IS LOADED (without using JQuery)
// Function to run as soon as all resources associated with the document are ready and JQuery script files are loaded.
function JQueryStart(state) {
if (state == null) {
state = "Unknown";
}
alert('JQuery State: ' + state);
//if (typeof window.jQuery !== 'undefined') { // Alt. Version #2 check
if (window.jQuery) {
// jquery is loaded...
alert("JQuery is loaded.");
// JQuery is downloaded. Now use JQuery to test if
// the document object model is fully
// loaded again from the point of view of JQuery.
// In most cases it is based on logic below.
// It is possible to load this function only when the
// DOM is ready instead of the whole document and all
// its files are ready and run a timer to detect when
// "window.jQuery" above is true. That would allow you
// to know JQuery is downloaded prior to the DOM and
// utilize it earlier.
$(document).ready(function () {
// ======== Begin JQuery Scripts ========
});
} else {
// JQuery did not load...
console.log("JQuery failed to load!");
alert("JQuery failed to load!");
}
};
// OLD BROWSER PAGE LOADER: This document loading check
// supports older browsers, including IE4+ and many older
// browsers like Firefox (2006), early Chrome (2010), etc.
// Note: "interactive" is when the document has finished
// loading and the document has been parsed and DOM is complete,
// but sub-resources such as scripts, images, style sheets and
// frames are still loading. "complete" is when all resources
// are loaded and right before the "Window.load event fires.
// Note: "document.onreadystatechange" has support in very old
// browsers amd may have support from IE4+, It fires as each
// state of the docuent load process changes below. IE 4-9 only
// supported "readyState" of "complete".
// If the document is already loaded and those events fired, run the JQuery function above.
if (document.readyState) {
if (document.readyState === "complete" // IE 4-9 only knows "complete"
|| document.readyState === "loaded") {
JQueryStart("Document fully loaded (early)");
} else {
// New browsers should run scripts when the HTML is
// parsed and the DOM built. Older IE browsers will
// not support the "DOMContentLoaded" event and instead
// fire when complete below. This allows newer browsers
// to fire only when the HTML DOM is ready, which happens
// right after the readyState=interactive fires.
if (window.addEventListener) {
// Listen for the "DOMContentLoaded" event, which occurs
// after "interactive" but when the HTML DOM is complete.
// This means the DOM is ready but other resources style
// sheets, other scripts, images, etc. may not be.
window.addEventListener('load', function () {
JQueryStart("Window fully loaded (2)");
}, false);
window.addEventListener('DOMContentLoaded', function () {
DOMStart("DOM complete (early)");
}, false);
} else {
// Run the older page "onreadystatechange" for older
// browsers. Below, runs when page resources are not
// yet fully loaded, so set up event listeners based
// on needs of old/new web browsers script support.
// This fires each time the document readyState changes,
// except in IE 4-9 that only supports "complete". Below,
// the DOM is loaded and parsed, but adding "interactive"
// to the condition below means other resources like CSS,
// images, etc may not have completed yet.
// Note: Add "interactive" below if needing to run early
// scripts as soon as the DOM is complete, and do not require
// styles sheets, script files, images, other resources, etc.
// Note: "interactive" fires before "DOMContentLoaded", but in
// IE 9 - 11 fires too early before parsing.
var isDone = false;
document.onreadystatechange = function () {
if (document.readyState === "complete" // IE 4-9 only knows "complete"
|| document.readyState === "loaded") {
if (!isDone) {
isDone = true;
JQueryStart("Document fully loaded");
}
}
else if (document.readyState === "interactive") {
DOMStart("Document interactive (early)");
}
};
}
}
} else {
// This is a fallback event format that works well in many older browsers.
window.onload = function () {
JQueryStart("Window fully loaded (1)");
};
};
Это сработало для меня, когда сценарий иногда запускался в середине страницы (частичный .net) или после полной загрузки страницы (вызов jquery.load())
window.onload = function(){
... jQuery Statements ...
}
if (window.jQuery!==undefined)
window.onload();
Быстрый способ - запустить команду jQuery в консоли разработчика. В любом браузере нажмите F12 и попробуйте получить доступ к любому элементу.
$("#sideTab2").css("background-color", "yellow");
Вы можете просто напечатать window.jQuery в консоли. Если он возвращает функцию (e,n) ... Затем подтверждается, что jquery загружен и работает успешно.