¿Es posible cargar varias versiones diferentes de jQuery en la misma página?
https://stackoverflow.com/questions/613808
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy haciendo un bookmarklet que cargará jQuery si no se encuentra el objeto. La carga verificará la versión de jQuery. El código es como:
(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 este generador de marcadores para crear el marcador http://subsimple.com/bookmarklets/jsbuilder.htm
Obviamente si la página ya tiene jQuery cargado. La carga del script 1.3.2 sobrescribiría el objeto window.jQuery en la página. Me pregunto, ¿hay alguna forma de permitir que 1.3.2 se cargue en otra variable autodenominada? Usando jQuery.noConflict (true); ?
Solución
Sospecho que ya has visto todas las advertencias y entiendo que puedes mover jQuery a otro espacio de nombres:
//Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
Y es probable que los complementos no funcionen Y debes hacer todo esto antes de que se carguen o utilicen otros scripts.
Buena suerte / algo curioso para saber si esto funciona para ti ~
Otros consejos
Sí Lo hice funcionar con 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);
})();
Al ejecutar " jQuery.noConflict (true); " El código que usa la primera versión de jQuery puede romperse.
En algunos casos esto, el código ni siquiera te pertenece. Escribe un script, que se supone que se debe agregar a las páginas y que usa jQuery, y no sabe nada acerca de la página de hospedaje.
Un código de hosting puede cargar su versión de jQuery, detectar que se cargó, comenzar a trabajar con él, luego esperar (setTimeout), y luego su código comienza, hacer '' jQuery.noConflict (true); " , y espera a que se cargue. Mientras su código espera, el control puede volver al código de alojamiento que intenta ejecutar su jQuery y encuentra que no existe.
Mi sugerencia, para este caso, es cargar el jQuery en una nueva ventana diferente, sin quitarlo de la original. Luego, cuando esté cargado, use " jQuery.noConflict (true); " en la nueva ventana para copiarlo a la ventana original. Sin embargo, el nuevo objeto jQuery se está ejecutando en la nueva ventana y su documento. Por lo tanto, cuando se utiliza el nuevo jQuery, el window.document original se debe pasar como el segundo parámetro como este:
newJq("#elementInOriginalDocument", window.document).html("some text");
Siguiendo mi implementación para esta 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>
Consulte este blog
Puedes usar el método
$.noConflict(true);
para lograr esto. Por ejemplo:
<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>
