0

我正在加载一个异步创建的脚本，以帮助防止网站变慢。我无法调用 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>
4

1 回答 1

2

在当前所有主要的浏览器中，可以使用该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属性是否为 string "complete"。

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

于 2013-10-04T21:11:20.323 回答