48

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

谢谢，

4

7 回答 7

98

所以，这是不可能的：

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);
于 2013-11-01T23:32:59.970 回答
9

第二种方法在页面加载完成后执行 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);
于 2013-11-01T23:33:43.973 回答
7

对于 Progressive Web App，我编写了一个脚本来轻松按需异步加载 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
});

加载脚本的功能：

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

这种方式的好处：

  • 它使用浏览器缓存
  • 当用户执行需要脚本而不是始终加载它的操作时，您可以加载脚本文件。
于 2020-08-28T12:42:30.727 回答
5

专注于接受答案的 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>

于 2018-06-05T08:51:19.823 回答
2

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

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);
};
于 2019-08-28T05:43:07.290 回答
1

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);
});
于 2020-02-12T12:54:03.397 回答
0 

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

// your javascript event

)};
</script>

于 2015-09-29T08:38:11.343 回答