页面加载后加载脚本?

IT技术 javascript jquery
2021-02-04 09:06:20

我与一家广告公司合作,在那里我们标记某些页面以跟踪活动。我的一个客户想要在页面完全加载完成后触发一个 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 加载页面后,还有其他方法可以调用上述脚本吗?

谢谢,

6个回答

所以,这是不可能的:

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);
getScript 不会使用浏览器缓存。这将重新加载文件并且需要时间
2021-03-31 09:06:20
@mcv - 表示尚未加载什么脚本?您的问题不够详细,如果它与此处的原始问题完全不同,则可能属于它自己的问题。如果您想知道它何时被加载,您可以onload<script>您插入标签放置一个事件处理程序网络上有数万篇关于动态加载脚本的文章。那里有很多解释。
2021-04-04 09:06:20
如果您想在异步加载的脚本中在加载后立即调用该函数,您可以这样做: $.getScript('async.js', function() { my_function(); });
2021-04-08 09:06:20
你说得对。我的问题是在这个问题的处理:stackoverflow.com/questions/14644558/...虽然这并没有完全解决它,因为我正在加载 Youtube API,当回调触发时它显然还没有完全初始化,所以它提供了自己的硬编码回调到onYouTubeIframeAPIReady().
2021-04-08 09:06:20
有没有办法在脚本加载后做一些事情?在这之后立即执行这意味着脚本尚未加载。(使用普通 js,而不是 jquery。)
2021-04-10 09:06:20

第二种方法是在页面加载完成后执行 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);
哦,你当然是对的!我将编辑我的答案以反映这一点。
2021-03-18 09:06:20
如果document.write()在文档加载后使用,它会清除当前文档并开始一个新文档,这肯定不是 OP 想要的。
2021-04-02 09:06:20

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

注意事项:默认情况下,$.getScript()不利用浏览器缓存并始终从服务器加载完整脚本。
2021-03-21 09:06:20

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

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