Question

我正在加载我异步创建的脚本，以帮助防止网站速度变慢。由于它尚未可用，我无法调用类Class.track（{“some_param”：“some_data”}）。如何实现异步加载并具有调用类的能力？

在js中加载的代码如下所示，它发生在关闭body标记之前，而Class.track在它下面被调用。

<script type="text/javascript">

    (function() {
        function async_load(){
            var api_id = "XXXXXXXXX";
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://site.com/script.js?id=' + api_id;
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
         }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
    })();

    Class.track("page_view", {"page":"plans"});
</script>

修改

接受Dan的评论和TJ的回答并决定修改它，下面是我提出的，希望这会帮助其他人。

<script type="text/javascript">
    var _Class = new function(){
        var items = [];

        this.track = function(type, params){
            params = params || {};
            items.push({"type":type, "params":params});
        }

        this.get = function(){
            return items;
        }

    };

    var Class = _Class;

    (function() {
        function async_load(){
            var api_id = "XXXXXXXXX";
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://site.com/script.js?id=' + api_id;
            s.onload = function(){
                var items = _Class.get();
                Class.trackBatch(items);
            };
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
         }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
    })();

    Class.track("page_view", {"page":"plans"});
</script>

Answer 1

在目前所有主流浏览器中，都可以使用script元素的onload：

s.onload = function() {
    /* ...this is called when the script is loaded, so `Class` should
       be available...
    */
    Class.track("page_view", {"page":"plans"});
};

在旧版本的IE中，您必须使用onreadystatechange，并检查元素的readyState属性是否为字符串"complete"。

或者，当然，您可以使用setTimeout或setInterval来轮询全局符号（我怀疑是Class），您创建（通过typeof }，例如if (typeof Class === "undefined") { /* ...schedule another check in a few milliseconds... */ }）。

异步脚本无法访问

1 个答案: