Ожидание динамически загружаемого скрипта

Question

В теле страницы мне нужно вставить этот код в результате вызова AJAX:

    <p>Loading jQuery</p>
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script>
    <p>Using jQuery</p>
    <script type='text/javascript'>
        $.ajax({
            ...
        });
    </script>

Я не могу использовать $.load(), поскольку документ уже загружен, поэтому событие не запускается.

Это безопасно? Если нет, то как мне убедиться, что скрипт jquery загружен до того, как будет выполнен мой сгенерированный код.

Answer 1

Добавьте идентификатор в ваш файл скрипта, чтобы вы могли запросить его.

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

Затем добавьте прослушиватель загрузки в JavaScript

<script>
  var script = document.querySelector('#hljs');
  script.addEventListener('load', function() {
    hljs.initHighlightingOnLoad(); 
  });
</script>

Answer 2

Это довольно безопасно. Исторически, теги <script> являются полной блокировкой, поэтому второй тег <script> не может быть обнаружен до того, как первый завершит анализ / исключение. Единственная проблема может заключаться в том, что «современные» браузеры имеют тенденцию загружать скрипты асинхронно и с задержкой. Поэтому, чтобы убедиться, что порядок правильный, используйте его так:

<p>Loading jQuery</p>
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script>
<p>Using jQuery</p>
<script type='text/javascript'>
    $.ajax({
        ...
    });
</script>

Однако, вероятно, лучше использовать динамическую вставку тега сценария, а не вставлять это как строку HTML в DOM. Была бы такая же история

var scr  = document.createElement('script'),
    head = document.head || document.getElementsByTagName('head')[0];
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js';
    scr.async = false; // optionally

head.insertBefore(scr, head.firstChild);

Answer 3

Есть также новая функция в jQuery 1.6. Это называется jQuery.holdReady(). Это на самом деле самоочевидно; когда вы звоните jQuery.holdReady(true), событие ready не запускается, пока вы не позвоните jQuery.holdReady(false) Установка этого значения в false не будет автоматически запускать событие готовности, она просто снимает удержание.

Вот неблокирующий пример загрузки скрипта, взятый из документации:

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

См. http://api.jquery.com/jQuery.holdReady/ для получения дополнительной информации

Answer 4

$. Ajax и $ .load - это одно и то же. Вы можете использовать либо. Если вы поместите $ .load в тег скрипта на странице, он сработает при загрузке, как $ .ajax ().

Когда дело доходит до ожидания запуска сценария, прежде чем что-то делать, то, что сказал Томалак, является своего рода правдой. Исключение составляют асинхронные вызовы. Javascript выполнит вызов AJAX, затем продолжит выполнение скрипта, и когда вызов AJAX ответит, он выполнит успех / неудачу в зависимости от того, что вы скажете.

Теперь скажите, что вы хотите, чтобы ваш JS ожидал возврата, с помощью одного вызова довольно легко просто обернуть каждую вещь в обратный вызов успеха, или вы можете сделать это классным способом и использовать $ .deferred. Это позволяет вам сделать несколько вызовов ajax или один, а затем выполнить некоторый код только после финиша.

$. Когда & $ .then, вероятно, являются лучшими в этой ситуации.

В любом случае, то, что вы делаете, безопасно.