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

第二种方法是在页面加载完成后执行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 3

专注于其中一个accepted answer的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>

Answer 4

对于渐进式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();
    }
});
}

这种方式的好处：

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

Answer 5

这是我正在使用且对我有用的代码。

renderMessage

Answer 6

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

Answer 7

http://jsfiddle.net/c725wcn9/2/embedded

您需要检查DOM才能检查此作品。 jQuery是必需的。

$(document).ready(function(){
   var el = document.createElement('script');
   el.type = 'application/ld+json';
   el.text = JSON.stringify({ "@context": "http://schema.org",  "@type": "Recipe", "name": "My recipe name" });

   document.querySelector('head').appendChild(el);
});

Answer 8

这是一个Atlas Action JS标签。供应商应该向客户提供一些文档，并提供有关在转换页面中实现标记的最佳实践的一些指导原则。您应该请求此文档或供应商联系人的客户直接请求他们。

页面加载后加载脚本？

8 个答案: