Можно ли загрузить несколько разных версий jQuery на одной странице?

Question

Я делаю букмарклет, который будет загружать jQuery, если объект не найден. Загрузка проверит версию jQuery. Код похож на:

(function(){

    var myBkl = {
         loadScript: function(src) {
            if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){
                return;
            }
            var s = document.createElement('script');
            s.setAttribute('src', src);
            s.setAttribute('type', 'text/javascript');
            document.getElementsByTagName('head')[0].appendChild(s); 
        },
        whenLoaded: function(callback){
            if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') { 
                callback(window.jQuery); 
            } 
            else {
                setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
            } 
        },
        init: function($){
            console.log($.fn.jquery);
        }
    };
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
    myBkl.whenLoaded(myBkl.init);

})();

Я использую этот конструктор букмарклетов для создания букмарклета http://subsimple.com/bookmarklets/jsbuilder.htm

Очевидно, если на страницу уже загружен jQuery. Загрузка скрипта 1.3.2 перезапишет объект window.jQuery на странице. Мне просто интересно, есть ли способ разрешить загрузку 1.3.2 в другую переменную с собственным именем? Использование jQuery.noConflict(true);?

Answer 1

Да. Я получил работу по этому коду:

    (function(){

    var myBkl = {
         jq: null,
         loadScript: function(src) {
            if(window.jQuery && window.jQuery.fn.jquery == '1.3.2'){
                return;
            }
            var s = document.createElement('script');
            s.setAttribute('src', src);
            s.setAttribute('type', 'text/javascript');
            document.getElementsByTagName('head')[0].appendChild(s); 
        },
        whenLoaded: function(callback){
            if (typeof(window.jQuery) !== 'undefined' && window.jQuery.fn.jquery == '1.3.2') { 
                myBkl.jq = window.jQuery.noConflict(true);
                callback(myBkl.jq); 
            } 
            else {
                setTimeout((function() {myBkl.whenLoaded(callback); }), 100);
            } 
        },
        init: function($){
            console.log($.fn.jquery);
            console.log(window.jQuery.fn.jquery);
        }
    };
    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
    myBkl.whenLoaded(myBkl.init);

})();

Answer 2

Я подозреваю, что вы уже видели все предупреждения и понимаете, что вы можете переместить jQuery в другое пространство имен:

//Completely move jQuery to a new namespace in another object.

var dom = {};
dom.query = jQuery.noConflict(true);

И эти плагины, вероятно, не будут работать, и вы должны сделать все это перед загрузкой или использованием других скриптов.

Удачи / любопытно узнать, работает ли это для вас ~

Answer 3

При запуске "jQuery.noConflict (true);" Код, использующий первую версию jQuery, может сломаться.
В некоторых случаях этот код даже не принадлежит вам. Вы пишете скрипт, который должен быть добавлен на страницы и использует jQuery, и ничего не знаете о странице хостинга.
Хост-код может загрузить свою версию jQuery, обнаружить, что он был загружен, начать работать с ним, затем ждать (setTimeout), а затем ваш код запускается, выполнить "jQuery.noConflict (true);" и ждет, пока он загрузится. Пока ваш код ожидает, элемент управления может вернуться к коду хостинга, который пытается запустить свой jQuery и обнаруживает, что он не существует.

В этом случае я предлагаю загрузить jQuery в другое новое окно, не удаляя его из исходного. Затем, когда он загружен, используйте «jQuery.noConflict (true);» в новом окне, чтобы скопировать его в исходное окно. Однако новый объект jQuery фактически работает в новом окне и его документе. Поэтому при использовании нового jQuery исходный файл window.document должен быть передан в качестве второго параметра, например:

newJq("#elementInOriginalDocument", window.document).html("some text");

После моей реализации этой идеи:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    </head>
    <body>
        Test jQuery
        <br />
        <span id="hostScope">hostScope</span>
        <br />
        <span id="guestScope">guestScope</span>

        <script>
            (function(hostWin){
                    var myBkl = {
                            win: null,
                            doc: null,
                            jq: null,
                            loadScript: function(src) {
                                if (this.doc == null){
                                    var nAgt = navigator.userAgent;
                                    if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
                                        var iframe = document.createElement('iframe');
                                        iframe.id = "if1";
                                        iframe.src= window.location.href;
                                        document.getElementsByTagName('head')[0].appendChild(iframe);
                                        this.whenIEIFrameLoaded(src, 0);
                                    } else {
                                        var iframe = document.createElement('iframe');
                                        iframe.id = "if1";
                                        document.getElementsByTagName('head')[0].appendChild(iframe);
                                        setTimeout((function() {myBkl.whenIframeLoaded(src); }), 1);
                                    }
                                }
                            },
                            whenIframeLoaded: function(src){
                                var oIframe = document.getElementById('if1');
                                var newdocument = (oIframe.contentWindow || oIframe.contentDocument);
                                if (newdocument.document) {
                                    newdocument = newdocument.document;
                                }
                                var newwin = oIframe.contentWindow;

                                if (newwin.document.documentElement.innerHTML){
                                    newwin.document.documentElement.innerHTML = '<!DOCTYPE html><html><head></head><body>N</body></html>';
                                }
                                this.doc = newwin.document;
                                this.win = newwin;

                                var script = this.doc.createElement('script');
                                script.setAttribute('src', src);
                                script.setAttribute('type', 'text/javascript');

                                this.doc.getElementsByTagName('head')[0].appendChild(script); 
                                this.whenLoaded(this.callback, 0);
                            },
                            whenIEIFrameLoaded: function(src, times){
                                var oIframe = document.getElementById('if1');

                                if (oIframe && oIframe.contentWindow && oIframe.contentWindow.document && oIframe.contentWindow.document.body){
                                    var newdocument = (oIframe.contentWindow || oIframe.contentDocument);
                                    if (newdocument.document) {
                                        newdocument = newdocument.document;
                                    }

                                    var script = newdocument.createElement('script');
                                    script.setAttribute('src', src);
                                    script.setAttribute('type', 'text/javascript');

                                    newdocument.getElementsByTagName('head')[0].appendChild(script); 

                                    this.doc = newdocument;
                                    this.win = oIframe.contentWindow;
                                    this.whenLoaded(myBkl.callback, 0);
                                } else {
                                    if (times < 5000){
                                        times++;
                                        setTimeout((function() {myBkl.whenIEIFrameLoaded(src, times); }), 2);
                                    }
                                } 
                            },
                            whenLoaded: function(callback, times){
                                    if (this.win && this.win.jQuery && typeof(this.win.jQuery) !== 'undefined' && this.win.jQuery.fn.jquery == '1.3.2') { 
                                        myBkl.jq = this.win.jQuery.noConflict(true);
                                        callback(myBkl.jq);
                                    } 
                                    else {
                                        if (times < 5000){
                                            times++;
                                            setTimeout((function() {myBkl.whenLoaded(callback, times); }), 5);
                                        }
                                    } 
                            },
                            callback: function(loadedJq){
                                    hostWin.myJq = loadedJq;
                                    //console.log("callback: The loaded jQuery ver is " + loadedJq.fn.jquery);
                                    whenLoadedOut();
                            }
                    };
                    myBkl.loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
            })(window);

            function whenLoadedOut(){
                if (window.jQuery) { 
                    //console.log("Host jQuery ver (window.jQuery.fn.jquery) is " + jQuery.fn.jquery);
                    //console.log("guest jQuery ver (window.lpJq)  is " + myJq.fn.jquery);
                    $("#hostScope").html("The jQuery ver of host is " + jQuery.fn.jquery);
                    myJq("#guestScope", document).html("The jQuery ver of guest is " + myJq.fn.jquery);
                } 
                else {
                    setTimeout((function() {whenLoadedOut(); }), 2);
                } 
            }
        </script>
    </body>
</html>

Answer 4

Проверить этот блог

Вы можете использовать метод

$.noConflict(true);

чтобы выполнить это. Например:

<script src="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //create this naming for Jquery 1.3.2 version
    var jQuery_1_3_2 = $.noConflict(true);
</script>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>