Вопрос по jquery, javascript – Загрузите jQuery с Javascript и используйте jQuery

63

Я добавляю библиотеку JQuery в DOM, используя:

<code> var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);
</code>

Однако, когда я бегу:

<code>jQuery(document).ready(function(){...
</code>

Консоль сообщает об ошибке:

<code>Uncaught ReferenceError: jQuery is not defined
</code>

Как мне динамически загружать jQuery и использовать его, когда он находится в DOM?

Некоторые ответы на этот вопрос могут помочь вам -stackoverflow.com/questions/7474354/… mrtsherman
Почему jQuery нарушает работу пользователей & apos; темы? Если загрузка jQuery (которая не оказывает влияния на css) может нарушить тематику, вы делаете что-то очень неправильное. Anders Tornblad
@ Скотт Да. У меня есть приложение, в котором при установке он загружает как jquery, так и скрипт. Мне нужно загрузить jquery внутри скрипта, чтобы jquery не нарушал пользовательские темы. Мне нужно условно загрузить JavaScript на определенную веб-страницу в своей теме. Пожалуйста, просто поверь мне в этом. ThomasReggi
Есть ли причина, по которой вы хотите сделать это по сравнению с более оптимизированным способом? Code Maverick
Хороший вопрос, но что, если они используют более старую версию jQuery или другую библиотеку? ThomasReggi

Ваш Ответ

7   ответов
0

<html>
  <head>

  </head>
  <body>

    <div id='status'>jQuery is not loaded yet.</div>
    <input type='button' value='Click here to load it.' onclick='load()' />

  </body>
</html>   

Автор сценария:

   <script>

        load = function() {
          load.getScript("jquery-1.7.2.js");
          load.tryReady(0); // We will write this function later. It's responsible for waiting until jQuery loads before using it.
        }

        // dynamically load any javascript file.
        load.getScript = function(filename) {
          var script = document.createElement('script')
          script.setAttribute("type","text/javascript")
          script.setAttribute("src", filename)
          if (typeof script!="undefined")
          document.getElementsByTagName("head")[0].appendChild(script)
        }

        </script>
Error: User Rate Limit ExceededafterError: User Rate Limit Exceeded
7

источник). Вы также можете использовать

document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>');

Это считается плохой практикой использованияdocument.write, но для завершения хорошо упомянуть об этом.

УвидетьПочему document.write считается "плохой практикой"? по причинам.pro в том, чтоdocument.write блокирует вашу страницу от загрузки других ресурсов, поэтому нет необходимости создавать функцию обратного вызова.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

по которой вы получаете эту ошибку, заключается в том, что JavaScript не ожидает загрузки скрипта, поэтому при запуске

jQuery(document).ready(function(){...

нет гарантии, что скрипт готов (и никогда не будет).

Это не самое элегантное решение, но работоспособное. По сути, вы можете проверять каждую 1 секунду, чтобы объект jQuery запускал функцию, когда она загружена с вашим кодом. Я бы добавил тайм-аут (скажем, clearTimeout после того, как он был запущен 20 раз), а также, чтобы остановить проверку на неопределенный срок.

var jQueryIsReady = function(){
    //Your JQuery code here
}

var checkJquery = function(){
    if(typeof jQuery === "undefined"){
        return false;
    }else{
        clearTimeout(interval);
        jQueryIsReady();
    }
}
var interval = setInterval(checkJquery,1000);
0

require.js Вы можете сделать то же самое безопасным способом. Вы можете просто определить свою зависимость от jquery и затем выполнить код, который вы хотите, используя зависимость, когда она загружается, не загрязняя пространство имен:

Я обычно рекомендую эту библиотеку для управления всеми зависимостями от Javascript. Это просто и позволяет эффективно оптимизировать загрузку ресурсов. Однако есть некоторыемеры предосторожности вам может понадобиться взять его при использовании с JQuery. Мой любимый способ борьбы с ними объясняется в этомGitHub репо и отражено в следующем примере кода:

<title>jQuery+RequireJS Sample Page</title>
   <script src="scripts/require.js"></script>
   <script>
   require({
       baseUrl: 'scripts',
       paths: {
           jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
       },
       priority: ['jquery']
    }, ['main']);
    </script>
109

который демонстрирует именно то, что вы ищете(unless I've misunderstood your request): http://jsfiddle.net/9N7Z2/188/

Есть несколько проблем с этим методом динамической загрузки JavaScript. Когда дело доходит до самых базовых фреймворков, таких как jQuery, на самом деле вы, вероятно, захотите загрузить их статически, потому что в противном случае вам пришлось бы писать целую фреймворк загрузки JavaScript ...

Вы можете использовать некоторые из существующих загрузчиков JavaScript или написать свой собственный, наблюдая заwindow.jQuery быть определенным.

// Immediately-invoked function expression
(function() {
    // Load the script
    var script = document.createElement("SCRIPT");
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    script.type = 'text/javascript';
    script.onload = function() {
        var $ = window.jQuery;
        // Use $ here...
    };
    document.getElementsByTagName("head")[0].appendChild(script);
})();

Просто помните, что если вам нужно поддержатьreally старые браузеры, такие как IE8,load обработчики событий не выполняются. В этом случае вам нужно будет опросить наличиеwindow.jQuery используя повторныйwindow.setTimeout, Здесь есть работающий JSFiddle с этим методом:http://jsfiddle.net/9N7Z2/3/

Есть много людей, которые уже сделали то, что вам нужно сделать. Ознакомьтесь с некоторыми из существующих платформ JavaScript Loader, например:

https://developers.google.com/loader/ http://yepnopejs.com/ (deprecated) http://requirejs.org/
Error: User Rate Limit Exceededstackoverflow.com/a/42013269/3577695
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededwp_enqueue_script()Error: User Rate Limit Exceededcodex.wordpress.org/Function_Reference/wp_enqueue_scriptError: User Rate Limit Exceededdigwp.com/2009/06/including-jquery-in-wordpress-the-right-wayError: User Rate Limit Exceededdigwp.com/2011/09/using-instead-of-jquery-in-wordpress
Error: User Rate Limit Exceeded
3

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 = function(){
    // your jQuery code here
} 

или если вы запускаете его в асинхронной функции, вы можете использоватьawait в приведенном выше коде

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

Если вы хотите сначала проверить, существует ли на странице jQuery, попробуйтеэтот

6

Сайт Encosia рекомендует:

<script type="text/javascript" 
        src="http://www..com/jsapi"></script>
<script type="text/javascript">
  // You may specify partial version numbers, such as "1" or "1.3",
  //  with the same result. Doing so will automatically load the 
  //  latest version matching that partial revision pattern 
  //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
  .load("jquery", "1.7.2");

  .setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

Но даже он признает, что это не сравнится с выполнением следующих действий, когда речь идет об оптимальной производительности:

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">\x3C/script>')</script>
    <script type="text/javascript" src="scripts.js"></scripts>
</body>
</html>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded ThomasReggi

Похожие вопросы