javascript - 一旦加载了特定的第三方脚本，我可以触发一个功能吗？

Question

我想触发一个函数尽快运行，但它需要等待另一个(第三方)脚本完成加载，否则还不会定义适当的变量。

我能否监听特定脚本以完成加载并将函数绑定(bind)到该事件？

我需要代码，所以:

加载时:

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

运行这个:

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

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

另一种方法是等待文档加载；这个问题是试图尽快运行脚本。

Answer 1

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

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