È possibile caricare più versioni diverse di jQuery sulla stessa pagina?
https://stackoverflow.com/questions/613808
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto creando un bookmarklet che caricherà jQuery se l'oggetto non viene trovato. Il caricamento verificherà la versione di jQuery. Il codice è simile a:
(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);
})();
Uso questo bookmarklet builder per creare il bookmarklet http://subsimple.com/bookmarklets/jsbuilder.htm
Ovviamente se la pagina ha già caricato jQuery. Il caricamento dello script 1.3.2 sovrascriverebbe l'oggetto window.jQuery sulla pagina. Mi chiedo solo che ci sia comunque il permesso di caricare 1.3.2 su un'altra variabile auto-denominata? Utilizzando jQuery.noConflict (true); ?
Soluzione
Sospetto che tu abbia già visto tutti gli avvertimenti e capisca che puoi spostare jQuery in un altro spazio dei nomi:
//Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
E quei plugin probabilmente non funzioneranno E devi fare tutto questo prima che altri script vengano caricati o usati.
Buona fortuna / un po 'curioso di sapere se questo funziona per te ~
Altri suggerimenti
Sì. Ho funzionato con questo codice:
(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);
})();
Quando esegui " jQuery.noConflict (true); " Il codice che utilizza la prima versione di jQuery potrebbe non funzionare.
In alcuni casi, il codice non ti appartiene nemmeno. Scrivi uno script, che dovrebbe essere aggiunto alle pagine e che utilizza jQuery e non sai nulla della pagina di hosting.
Un codice di hosting può caricare la sua versione di jQuery, rilevare che è stato caricato, iniziare a lavorare con esso, quindi attendere (setTimeout) e quindi avviare il codice, eseguire " jQuery.noConflict (true); " e attende fino a quando non viene caricato. Durante l'attesa del codice, il controllo potrebbe tornare al codice di hosting che tenta di eseguire jQuery e rileva che non esiste.
Il mio suggerimento, in questo caso, è di caricare jQuery in una nuova finestra diversa, senza rimuoverlo da quello originale. Quindi, quando viene caricato, usa il " jQuery.noConflict (true); " nella nuova finestra per copiarlo nella finestra originale. Tuttavia, il nuovo oggetto jQuery è attualmente in esecuzione sulla nuova finestra e sul suo documento. Pertanto, quando si utilizza il nuovo jQuery, l'originale window.document deve essere passato come secondo parametro in questo modo:
newJq("#elementInOriginalDocument", window.document).html("some text");
Seguendo la mia implementazione per questa idea:
<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>
Controlla questo blog
Puoi usare il metodo
$.noConflict(true);
per raggiungere questo obiettivo. Ad esempio:
<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>
