一旦加载了特定的第三方脚本，我可以触发函数吗

Can I trigger a function once a specific third party script has loaded?

本文关键字：我可以 函数 脚本 第三方 加载      更新时间：2023-09-26

我想触发一个函数尽快运行，但它需要等待另一个（第三方）脚本完成加载，否则还没有定义合适的变量。

我可以监听特定的脚本来完成加载并将函数绑定到该事件吗？

我需要代码，所以：

加载时：

<script src="https://www.officeball.biz/socket.io/socket.io.js"></script>

运行此：

function(){ console.log('socket ready!'}`

我似乎可以修改第三方脚本来调用函数，但在这种情况下不行：socket.io是一个动态生成的脚本，我无法控制它的源代码。

另一种选择是等待文件加载；这个问题是为了尽快运行脚本。

您可以创建一个脚本并添加到头部：

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.officeball.biz/socket.io/socket.io.js';
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function() { 
    console.log( 'loaded' );
}

这个例子可以被包装成一个函数并添加到文档头：

<script>    
    function load_script( src, callback ) {
        var script = document.createElement('script');
        script.src = src;
        document.getElementsByTagName('head')[0].appendChild(script);
        script.onload = callback;
    }
</script>

而且，它以后可以这样使用：

load_script( 'https://www.officeball.biz/socket.io/socket.io.js', function() {
    console.log( 'socket ready!' );
});

此外，作为对您评论的回应，还可以创建一个具有id和data属性的脚本标记：

<script id="socket-io" data-src="https://www.officeball.biz/socket.io/socket.io.js" type="text/javascript"></script>

为了稍后添加src属性，脚本在设置src属性的那一刻开始加载：

var script = document.getElementById( 'socket-io' );
script.src = script.getAttribute( "data-src" );
script.onload = function() { 
    console.log( 'socket ready!' );
}

当然，这可以封装在一个函数中，例如：

<script>    
    function load_script( id, callback ) {
        var script = document.getElementById( id );
        script.src = script.getAttribute( "data-src" );
        script.onload = callback;
    }
</script>

最后：

load_script( 'socket-io', function() {
    console.log( 'socket ready!' );
});
相关文章：