Question

我想触发一个尽可能快地运行的函数，但它需要等待另一个（第三方）脚本完成加载，否则将不会定义正确的变量。

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

我需要代码，所以：

加载时：

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

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

1 个答案: