Javascript 页面加载后加载脚本？

我在一家广告公司工作，在那里我们标记某些页面以跟踪活动。我的一个客户端希望在页面完全加载完毕后触发一个javascript标记来跟踪活动（以防止由于标记加载时间缓慢而导致页面内容加载缓慢）

页面完全加载后应加载的标记示例如下：

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

document.write（“”）

我在研究一些stackoverflow线程时，遇到了下面的实现，我认为它可以工作：

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

window.onload=function（）{
};

我在自己的网页上对此进行了测试，我确实得到了标签，但我想知道是否有其他方法或更健壮的方法，最好是使用某种jquery

下面是客户机尝试的一个示例实现，但它似乎破坏了他们的页面：

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

jQuery（window）.load（函数（）{$（''）.insertAfter（'#div_name'）；}）；

我已经有一段时间没有做JQuery了，我希望能从这里的其他成员那里得到一些信息。在使用JQuery加载页面后，是否有其他方法可以调用上述脚本

---

谢谢，

所以，这是行不通的：

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

你想什么时候都行。如果要确保文档已完成加载，可以执行以下操作：

$(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);

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

---

第二种方法是在页面完成加载后执行JavaScript代码，但实际上并不是在那里执行JavaScript代码，而是插入纯HTML。
第一件事是可行的，但会立即加载JavaScript并清除页面（这样您的标记就会出现在那里，但没有其他内容）。
（另外：language=“javascript”已被弃用多年，请改用type=“text/javascript！”）

要使其正常工作，必须使用JavaScript中包含的DOM操作方法。基本上你需要这样的东西：

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

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

$（窗口）.bind（“加载”，函数（）{
//您的javascript事件
)};

专注于的jQuery解决方案之一，是一个伪装的请求。它允许通过添加第二个参数在成功时执行其他功能：

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

或者请求的处理程序本身，即成功（

.done（）

-已加载脚本）或失败（

.fail（）

）：

$.getScript(
"https://code.jquery.com/color/jquery.color.js",
（）=>console.log（'loaded script！'）
).done（（脚本、文本状态）=>{
console.log（textStatus）；
$（“.block”）.animate（{backgroundColor:“green”}，1000）；
}).fail（（jqxhr、设置、异常）=>{
log（异常+'：'+jqxhr.status）；
}
);
.block{背景色：蓝色；宽度：50vw；高度：50vh；边距：1rem；}
这是我正在使用的代码，它对我有用

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);
};


您将需要检查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);
});

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

这种方式的好处：


它使用浏览器缓存
您可以在用户执行需要脚本的操作时加载脚本文件，而不是始终加载脚本
如果你在使用jQuery，你可以只做
$.getScript（“urlHere”）
-但是如果你在做广告，我会重新考虑jQuery-它有80kb的代码，这对于广告来说太多了。它更像一个1x1像素，可能需要额外的脚本。$。加载页面上的所有内容后，getScript将调用URL？您也可以在页面末尾添加脚本。如果在加载文档后使用
document.write（）
，它将清除当前文档并启动一个新文档，而OP肯定不希望这样。哦，您当然是对的！我将编辑我的答案以反映这一点。如果您希望在异步加载的脚本加载后立即调用该脚本中的函数，可以执行以下操作：
$.getScript（'async.js'，function（）{my_function（）；}）getScript将不使用浏览器缓存。这将重新加载文件并需要时间。在加载脚本后，是否有方法执行某些操作？在此之后直接执行此操作意味着脚本尚未加载。（使用纯js，而不是jquery。）@mcv-表示什么脚本还没有加载？如果你的问题与原来的问题完全不同，那么你的问题没有被详细说明，可能属于它自己的问题。如果您想知道何时加载，可以在插入的
标记上放置
onload
事件处理程序。网上有成千上万篇关于动态加载脚本的文章。有很多解释，你是对的。我的问题在以下问题中处理：。虽然这并没有完全解决问题，因为我正在加载Youtube API，当回调启动时，它显然还没有完全初始化，所以它提供了自己的硬编码回调，指向
onyoutubeiframeapiredy（）
。这个答案缺少教育性解释。提示：默认情况下，
$.getScript（）
不利用浏览器缓存，始终从服务器加载完整脚本。