Question

我正在重构HTML小部件（社交图标类型）的代码，其中原始开发人员将小部件应用程序编写为jQuery扩展。如下所示调用窗口小部件并使用$ .noConflict（）但是已经实例化jQuery的页面与窗口小部件调用的jQuery发生冲突。

有没有让jQuery调用两次的解决方法？在某些页面上，它似乎覆盖了小部件标记之前添加的其他jQuery扩展，请参阅下面的源代码。实际的小部件是另一个文件，这是从标签加载的init代码，它导致jQuery冲突。

    var xRemote = 'http://assets.xxxx.com/webwidget/',
    jquerySrc = xRemote + 'lib/jquery/jquery-1.11.1.min.js';

    var appStart = function () {

        // callback loader
        var callback = function () {
            $.getScript(xRemote + "app/easyXDM/easyXDM.min.js", function (data, status, jqxhr) {
                $.getScript(xRemote + "lib/jquery/jquery.xdomainrequest.min.js", function (data, status, jqxhr) {
                    $.getScript(xRemote + "app/public/js/jsonlite.js", function (data, status, jqxhr) {
                        $.getScript(xRemote + "app/public/js/xxx.js", function (data, status, jqxhr) {
                            var $j = jQuery.noConflict();
                            $j('body').xxxxxwidgetextension();
                            $j('head').append('<meta name="viewport" content="width=device-width" />');
                        });
                    });
                });
            });
        }

        createStyleLink();
        loadjQuery(jquerySrc, callback);

    }

    // create link to stylesheet
    function createStyleLink() {

        var ss = document.createElement("link");
        ss.type = "text/css";
        ss.rel = "stylesheet";
        ss.href = xRemote + "app/public/css/xxxwidget.css";
        document.getElementsByTagName("head")[0].appendChild(ss);

    }

    // load jQuery with callback
    function loadjQuery(url, callback) {

        // create <script> tag
        var s = document.createElement("script");
        s.src = url;
        if (s.addEventListener) {
            s.addEventListener("load", callback, false);
        }
        else if (s.readyState) {
            s.onreadystatechange = callback;
        }
        document.body.appendChild(s);
    }

    appStart();

Answer 1

你能不能检查jQuery是否已经加载？

if(jQuery == undefined){
    loadjQuery(jquerySrc, callback);
} else {
    callback();
}

当widget实例化自己的jQuery依赖时，避免jQuery冲突？

1 个答案: