jquery 尝试在script标记上激发onload事件

ui7jx7zq 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(129)

我试图按顺序加载一组脚本，但onload事件没有为我触发。

var scripts = [
        '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
        MK.host+'/templates/templates.js'
    ];

    function loadScripts(scripts){
        var script = scripts.shift();
        var el = document.createElement('script');
        el.src = script;
        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);
    }

    loadScripts(scripts);

字符串
我猜像el.onload这样的原生事件在使用jQuery将元素追加到DOM时不会触发。如果我使用本机document.body.appendChild(el)，那么它会按预期触发。

jquery

来源：https://stackoverflow.com/questions/16230886/trying-to-fire-the-onload-event-on-script-tag

3条答案

按热度按时间

bttbmeg01#

src属性应该在onload事件后设置，例如：

el.onload = function() { //...
el.src = script;

字符串
在**附加onload事件之前，还需要将脚本追加到DOM中：

$body.append(el);
el.onload = function() { //...
el.src = script;

型
请记住，您需要检查readystate的IE支持。如果你使用的是jQuery，你也可以尝试getScript()方法：http://api.jquery.com/jQuery.getScript/

赞(0）回复(0）举报 2023-08-04

koaltpgm2#

我遇到了类似的问题，试图测试jQuery是否已经出现在页面上，如果没有强制加载，然后执行一个函数。我尝试了@大卫Hellsing的变通方法，但没有机会满足我的需求。事实上，onload指令立即被求值，然后$在这个函数中的用法还不可能（是的，“$不是一个函数”。
所以，我提到了这篇文章：https://developer.mozilla.org/fr/docs/Web/Events/load并将事件侦听器附加到我的脚本对象。

var script = document.createElement('script');
script.type = "text/javascript";
script.addEventListener("load", function(event) {
    console.log("script loaded :)");
    onjqloaded(); // in fact, yourstuffscript() function
});
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

字符串
对于我的需要，它现在工作得很好。希望能对别人有所帮助：）

赞(0）回复(0）举报 2023-08-04

v7pvogib3#

按顺序加载脚本的工作方式（即。等待直到加载一个，然后加载另一个，等等...）
以下脚本被添加到html页面：

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", (event) => {

        function fn(src) {
            return new Promise(resolve => { // promise is initiated
                const script = document.createElement("script"); // creates <script> tag
                // script.async = true is not required since Promise is used
                script.onload = resolve; // promise will resolve on load event
                script.setAttribute("src", src); // will set srs="link to your source file here"
                document.getElementsByTagName('body')[0].appendChild(script); // append the created <script> tag to <body>
            });
        }

        const url = [ // order of script tags
            "/script1.js", 
            "/script2.js",
            "/script3.js"
        ];

        Promise.resolve(fn(url[0])) // wait until url[0] is resolved, then
            .then(() => fn(url[1])) // call and wait until url[1] is resolved, then
            .then(() => fn(url[2])) // call url[2]

    });

</script>

字符串
重要的是要在每个**中返回结果".then”using"（）=>"**这被称为Chaining：
总是返回结果，否则回调将无法捕获前一个promise的结果（对于箭头函数，（）=> x是（）=> { return x;}）
加载的html页面上的结果：

<body>
    <!-- your html -->
    <script src="/script1.js"></script>
    <script src="/script2.js"></script>
    <script src="/script3.js"></script>
</body>

型
x1c 0d1x的数据

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 尝试在script标记上激发onload事件

3条答案

相关问题

热门标签

最新问答