Как подождать document.write для завершения

Question

Я пытаюсь написать некоторый код обратного кода скрипта, чтобы, если jQuery и jQuery Validator недоступны из CDN, я загружаю локальную версию. Обратите внимание, что следующий сценарий находится в отдельном файле для поддержки политики безопасности контента (CSP).

(window.jQuery || document.write('<script src="/js/jquery.js"><\/script>')); 
($.validator || document.write('<script src="/js/jquery-validate.js"><\/script>')); 

Если JQuery не доступен новый тег сценария записывается в конец документа, но тогда ошибки следующей строки о том, что $ является неопределенным. Как я могу дождаться завершения записи документа до загрузки документа до выполнения следующей строки?

Answer 1

Вы должны использовать событие onload<script>. Вместо ducoment.write, добавьте тег сценария в документ с помощью манипулирования DOM:

var s = document.createElement('script'); 
s.onload = function() { 
    // jQuery is now loaded and can be used 
} 
s.src = '/js/jquery.js'; 
document.getElementsByTagName('head')[0].appendChild(s); 

UPDATE:

Ответ на ваш вопрос: «как ждать document.write» это вам не нужно, потому что document.write является синхронным. Следующая строка после document.write будет выполняться только после завершения записи. Однако, если вы пишете тег <script> в документе с атрибутом src, загрузка ресурса (где src указывает) будет асинхронной и начнется после завершения записи в paralell со следующими операциями. Поскольку невозможно заранее сказать, как долго будет загружаться ресурс, единственный жизнеспособный подход, чтобы убедиться, что все доступно из внешнего скрипта, - это событие onload.

Answer 2

document.write уже блокирует выполнение до тех пор, пока информация не будет проанализирована и обработана. Поэтому для вашего примера не требуется никакого дополнительного кода.

С другой стороны, я бы рекомендовал использовать DOM-инъекцию вместо document.write. document.write задерживает обработку CSS и может вызвать FOUC (Вспышка неровного содержимого).

DOM инъекция может быть сделано следующим образом:

var scriptElm = document.createElement('script'); 
scriptElm.src = '/js/jquery.js'; 
document.getElementsByTagName('head')[0].appendChild(scriptElm); 

// Check if jQuery is loaded here