Question

我的应用程序检查当前加载的脚本上是否有jQuery。如果没有，我用getScript检索它并加载一个函数，它基本上检索$.getJSON在json中序列化的html / js，然后执行它：

if (typeof jQuery == 'undefined') {
    if (typeof $ == 'function') {
        thisPageUsingOtherJSLibrary = true;
    }

    function getScript(url, success) {
        var script = document.createElement('script');
        script.src = url;

        var head = document.getElementsByTagName('head')[0];

        done = false;
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null;
                head.removeChild(script);
            };
        };

        head.appendChild(script);
    };

    getScript(AbsURL + '/scripts/jquery/jquery-1.9.1.min.js', function () {
        if (typeof jQuery !== 'undefined') {
            if (!thisPageUsingOtherJSLibrary) {
                jQuery(document).ready(function ($) {
                    MyFunction($);
                });
            } else {
                ...
            }
        }
    });
}

function MyFunction($) {
    $.getJSON(AbsURL + "/widget/Init.aspx?" + queryString + "&callback=?", function (html) {
        JsonToHtml(html);
    });

    function JsonToHtml(html) {
        var items = [];
        $.each(html, function (key, val) {
            items.push(val);
        });

        $('body').prepend(items.join(''));
    }
}

事实是：如果我在加载主页面时有jQuery，则会执行加载（反序列化）脚本，否则会在主体上添加，但不执行任何操作。

我在这里错过了哪一步？

问题是加载脚本的执行。这是执行：

<script type="text/javascript">console.log("ciaopollo");</script>

这不是：

<script type="text/javascript">(function (w, d) { var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "http://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s, tag); }; if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; } })(window, document);</script>

Answer 1

您可以使用comment by @clapas中的deferred.done()。由于$get.JSON()是异步并且实现了Promise接口，因此您可以获得延迟属性，例如.done()，.error()等。

因此，请确保您的响应成功，然后执行下一步操作，否则将处理错误。

JQuery文档示例：

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});

或者，如果需要在$get.JSON()之前获取脚本，则通过将脚本嵌入其中来加载脚本，一些开发人员使用此策略来阻止javascript阻止页面加载。以下示例摘自代码以获取Webfonts：

// this is just another way to create '<script src...'> and
// a method used by placing it in <head></head> so its processed
// before critical render path.
(function() {
    document.getElementsByTagName("html")[0].className += " wf-loading";
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

希望这有帮助。

出于格式原因对此处的评论做出回应： 尝试以下方法：

// optional reference to d, declare var _d;
$.getJSON( file, query , function( d ) { 
  // do nothing or _d = d;
}) 
.done(function( d ) { 
  // call fn(d) 
});

如果我动态加载（在它之前）jQuery，为什么jQuery不能执行加载的脚本？

1 个答案: