Загрузка скриптов после загрузки страницы?

Я работаю с рекламной компанией, где мы помещаем определенные страницы для отслеживания активности. Мой клиент хочет отключить ярлык javascript для отслеживания активности ПОСЛЕ завершения полной загрузки страницы (чтобы предотвратить медленное скачивание содержимого страницы из-за медленного времени загрузки тегов).

Примерный тег, который должен загружаться ПОСЛЕ полной загрузки страницы:

<script>document.write('<s'+'cript language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></s'+'cript>')</script>

Я смотрел несколько потоков stackoverflow, и я наткнулся на следующую реализацию, которая, как я думаю, будет работать:

window.onload = function(){
  <script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>
};

Я тестировал это на своей собственной веб-странице, и у меня получилось, что тег срабатывает, но мне интересно, есть ли какие-то альтернативные или более надежные методы, в идеале, используя какой-либо jquery.

Ниже приведен пример реализации, выполненный клиентом, но, похоже, он сломал свою страницу:

<script>
jQuery(window).load(function () {$('<script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>').insertAfter('#div_name');});
</script>

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

Спасибо,

Ответы

Ответ 1

Итак, нет способа, которым это работает:

window.onload = function(){
  <script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>
};

Вы не можете свободно отбрасывать HTML в середине javascript.

Если у вас есть jQuery, вы можете просто использовать:

$.getScript("http://jact.atdmt.com/jaction/JavaScriptTest")

когда захотите. Если вы хотите, чтобы документ завершил загрузку, вы можете сделать это:

$(document).ready(function() {
    $.getScript("http://jact.atdmt.com/jaction/JavaScriptTest");
});

В простом javascript вы можете динамически загружать script в любое удобное для вас время:

var tag = document.createElement("script");
tag.src = "http://jact.atdmt.com/jaction/JavaScriptTest";
document.getElementsByTagName("head")[0].appendChild(tag);

Ответ 2

Второй подход является правильным для выполнения кода JavaScript после завершения загрузки страницы - но на самом деле вы не выполняете код JavaScript там, вы вставили простой HTML.
Первое работает, но сразу же загружает JavaScript и очищает страницу (так что ваш тег будет там, но ничего больше).
(Плюс: язык = "javascript" устарел много лет, используйте type = "text/javascript" вместо этого!)

Чтобы получить эту работу, вы должны использовать методы манипуляции DOM, включенные в JavaScript. В основном вам понадобится что-то вроде этого:

var scriptElement=document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = filename;
document.head.appendChild(scriptElement);

Ответ 3

Сосредоточив внимание на одном из принятых ответов решений jQuery, $.getScript() является скрытым .ajax() запросом. Это позволяет выполнить другую функцию в случае успеха, добавив второй параметр:

$.getScript(url, function() {console.log('loaded script!')})

Или для самих обработчиков запросов, т.е. успех (.done() - скрипт был загружен) или сбой (.fail()):

$.getScript(
    "https://code.jquery.com/color/jquery.color.js",
    () => console.log('loaded script!')
  ).done((script,textStatus ) => {
    console.log( textStatus );
    $(".block").animate({backgroundColor: "green"}, 1000);
  }).fail(( jqxhr, settings, exception ) => {
    console.log(exception + ': ' + jqxhr.status);
  }
);

.block {background-color: blue;width: 50vw;height: 50vh;margin: 1rem;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>

Ответ 4

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event

)};
</script>

Ответ 5

Вот код, который я использую и который работает для меня.

window.onload = function(){
    setTimeout(function(){
        var scriptElement=document.createElement('script');
        scriptElement.type = 'text/javascript';
        scriptElement.src = "vendor/js/jquery.min.js";
        document.head.appendChild(scriptElement);

        setTimeout(function() {
            var scriptElement1=document.createElement('script');
            scriptElement1.type = 'text/javascript';
            scriptElement1.src = "gallery/js/lc_lightbox.lite.min.js";
            document.head.appendChild(scriptElement1);
        }, 100);
        setTimeout(function() {
            $(document).ready(function(e){
                lc_lightbox('.elem', {
                    wrap_class: 'lcl_fade_oc',
                    gallery : true, 
                    thumb_attr: 'data-lcl-thumb', 
                    slideshow_time  : 3000,
                    skin: 'minimal',
                    radius: 0,
                    padding : 0,
                    border_w: 0,
                }); 
            });
        }, 200);

    }, 150);
};

Ответ 6

Это тег JS Atlas Action. Поставщик должен предоставить некоторые документы клиенту с некоторыми рекомендациями по передовым методам реализации тега на странице конверсии. Вы должны запросить клиента для этого контакта с документами или поставщиком, чтобы запросить их напрямую.