Блог

Я рефакторинг кода для HTML-виджета (типа социальных значков), в котором первоначальный разработчик написал приложение виджета как расширение jQuery. Виджет вызывается, как показано ниже, и использует $.noConflict(), но страницы, на которых уже создан экземпляр jQuery, конфликтуют с jQuery, вызываемым виджетом.

Есть ли какой-либо обходной путь для повторного вызова jQuery? На некоторых страницах кажется, что он перезаписывает другие расширения jQuery, добавленные до тега виджета, см. Его Источник ниже. Фактический виджет — это другой файл, это код инициализации, который загружается из тега и который вызывает конфликт 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();
 

Разве вы не можете просто проверить, загружен ли jQuery?

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