같은 페이지에 여러 다른 버전의 jQuery를로드 할 수 있습니까?
https://stackoverflow.com/questions/613808
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
객체를 찾을 수없는 경우 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); ?
해결책
나는 당신이 이미 모든 경고를 보았고 jQuery를 다른 네임 스페이스로 옮길 수 있다는 것을 이해합니다.
//Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
그리고 그 플러그인은 아마도 작동하지 않으며 다른 스크립트가로드되거나 사용되기 전에이 모든 작업을 수행해야합니다.
행운을 빕니다 / 이것이 당신에게 효과가 있는지 배우고 싶습니다 ~
다른 팁
예. 이 코드로 작동했습니다.
(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);
})();
"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>
확인하다 이 블로그
메소드를 사용할 수 있습니다
$.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>
제휴하지 않습니다 StackOverflow
