Как иметь script в <head> добавить script в конец <body>

Клиент использует Sharetribe, который позволяет добавлять пользовательские JS через admin, но только в голове. Я хочу, чтобы мой script загружал после jQuery, но jQuery загружается в конец тела. Как я могу написать vanilla JS, который добавляет мой основной script до конца после загрузки документа?

Я пробовал это:

<script>
    var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.src   = "http://cdn...";
    document.body.appendChild(script);

    var script2 = document.createElement("script");
    script2.type  = "text/javascript";
    script2.text  = "$(SOME.CODE.HERE);"
    document.body.appendChild(script2);
</script>

Но он запускается до того, как документ завершит загрузку (и, в частности, до того, как появится jQuery). Единственное, о чем я могу думать, это установить таймер, но это кажется ошибкой.

Любые советы?

Ответы

Ответ 1

Используйте DOMContentLoaded событие:

Событие DOMContentLoaded запускается, когда документ полностью загружен и проанализирован, не дожидаясь завершения стилей, изображений и подкадров, чтобы завершить загрузку (событие загрузки может использоваться для обнаружения полностью загруженной страницы).

document.addEventListener("DOMContentLoaded", function (event) {
  console.log("DOM fully loaded and parsed");

  // Your code here
});

DOMContentLoaded совпадает с ready событие jQuery.

Документация

Ответ 2

Как вы ждете загрузки jQuery, вы можете просто обернуть свой код в jQuery $(document).ready() method:

$(document).ready(function() {
    // Your code here.
});

Нельзя безопасно манипулировать страницей, пока документ не будет готов. jQuery определяет это состояние готовности для вас. Код, включенный внутри $( document ).ready(), запускается только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript.

Я понимаю, что вы упоминали, что хотите это в "vanilla" JS, но поскольку вы все равно ожидаете загрузки jQuery, это кажется немного избыточным.

Ответ 3

Сообщите вашему коду ждать завершения DOM:

window.onload = function() {        
    var script   = document.createElement("script");
    script.type  = "text/javascript";
    //....
}

Или используя jQuery:

$(document).ready(function() {
    var script   = document.createElement("script");
    script.type  = "text/javascript";
    //....
});

Ответ 4

Когда браузер запускает ваш код в <head>, элемент <body> еще не существует. Итак, document.body был null.

Чтобы создать элемент script a <body>, используйте событие "load" document, например:

.............
document.addEventListener('load', function(event){
   var script = document.createElement('script');
   ...............
   document.body.appendChild(script);
}, false);
............

Ответ 5

$(document).ready(){} выполняется, когда ваш элемент dom успешно выполняется.