页面加载后加载脚本？

Question

我与一家广告公司合作,在那里我们标记某些页面以跟踪活动.我的客户希望在页面完全加载之后触发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,并希望我能在这里得到其他成员的一些意见.有没有其他方法可以在使用JQuery加载页面后调用上面的脚本？

谢谢,

Answer 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中,您可以随时动态加载脚本:

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

Answer 2

要在页面加载后轻松“延迟”脚本执行，请使用“defer”属性：

<script src="demo_defer.js" defer></script>

请记住，这仅适用于外部脚本（使用“src”属性调用）

文档：

https://www.w3schools.com/tags/att_script_defer.asp

https://javascript.info/script-async-defer

Answer 3

第二种方法是在页面加载完成后执行JavaScript代码的权利 - 但是你实际上并没有在那里执行JavaScript代码,而是插入了纯HTML.
第一件事是有效的,但是立即加载JavaScript并清除页面(因此你的标签将在那里 - 但没有别的).
(另外:language ="javascript"已被弃用多年,请改用type ="text/javascript"!)

要实现这一点,您必须使用JavaScript中包含的DOM操作方法.基本上你需要这样的东西:

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

Answer 4

专注于已接受答案的 jQuery 解决方案之一，$.getScript()是.ajax()变相的请求。它允许通过添加第二个参数成功执行其他函数：

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

或者在请求的处理程序本身上，即成功（.done()- 脚本已加载）或失败（.fail()）：

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

$.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;}

Answer 5

对于渐进式 Web 应用程序，我编写了一个脚本来轻松按需异步加载 javascript 文件。脚本只加载一次。因此，您可以根据需要随时为同一个文件调用 loadScript。它不会被加载两次。此脚本需要 JQuery 才能工作。

例如：

loadScript("js/myscript.js").then(function(){
    // Do whatever you want to do after script load
});

或在异步函数中使用时：

await loadScript("js/myscript.js");
// Do whatever you want to do after script load

在您的情况下，您可以在文档准备好后执行此操作：

$(document).ready(async function() {
    await loadScript("js/myscript.js");
    // Do whatever you want to do after script is ready
});

loadScript 函数：

function loadScript(src) {
  return new Promise(function (resolve, reject) {
    if ($("script[src='" + src + "']").length === 0) {
        var script = document.createElement('script');
        script.onload = function () {
            resolve();
        };
        script.onerror = function () {
            reject();
        };
        script.src = src;
        document.body.appendChild(script);
    } else {
        resolve();
    }
});
}

这种方式的好处：

• 它使用浏览器缓存
• 当用户执行需要脚本而不是始终加载它的操作时，您可以加载脚本文件。