É possível carregar várias versões diferentes do jQuery na mesma página?
https://stackoverflow.com/questions/613808
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu estou fazendo um bookmarklet que irá carregar jQuery se o objeto não for encontrado. O carregamento irá verificar a versão do jQuery. O código é semelhante:
(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);
})();
Eu uso este construtor bookmarklet para criar o bookmarklet http://subsimple.com/bookmarklets/jsbuilder.htm
Obviamente, se a página já jQuery carregado. O carregamento do script 1.3.2 iria substituir o objeto window.jQuery na página. Eu só quero saber se houver qualquer maneira para deixar 1.3.2 a carga para outra variável auto chamado? Usando jQuery.noConflict(true);?
Solução
Eu suspeito que você já viu todas as advertências e compreender que você pode mover jQuery para outro espaço de nomes:
//Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
E isso plugins provavelmente não vai funcionar e você deve fazer tudo isso antes de outros scripts são carregados ou usado.
Good Luck / meio curioso para saber se isso funciona para você ~
Outras dicas
Sim. Eu tenho que trabalhar por este código:
(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);
})();
Ao executar "jQuery.noConflict (true);" O código que usa a primeira versão jQuery pode quebrar.
Em alguns casos isso, o código nem sequer pertencem a você. Você escreve um roteiro, que é suposto ser adicionados a páginas e que usa jQuery, e você não sabe nada sobre a página de hospedagem.
Um código de hospedagem pode carregar sua versão jQuery, detectou que ele foi carregado, começar a trabalhar com ele, e depois esperar (setTimeout) e, em seguida, seus começos de código, fazer "jQuery.noConflict (true);" e espera até que ele é carregado. Enquanto seus esperas de código, o controle pode retornar ao código de hospedagem que tenta executar o seu jQuery e descobre que ela não existe.
A minha sugestão, para este caso, é carregar o jQuery em uma nova janela diferente, sem removê-lo do original. Então, quando é carregada, utilizar o "jQuery.noConflict (true);" na nova janela para copiá-lo para a janela original. No entanto, o novo objeto jQuery realmente está sendo executado na nova janela e seu documento. Então, quando usando o novo jQuery o window.document original deve ser passar como o segundo parâmetro como este:
newJq("#elementInOriginalDocument", window.document).html("some text");
Na sequência da minha aplicação para essa idéia:
<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>
Verifique neste blog
Você pode usar o método
$.noConflict(true);
para alcançar este objetivo. Por exemplo:
<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>
