同じページに複数の異なるバージョンの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);
})();
＆quot; jQuery.noConflict（true）;＆quot;の実行時最初のjQueryバージョンを使用するコードが破損する場合があります。
場合によっては、コードはあなたにさえ属していません。ページに追加されるはずのスクリプトを記述し、jQueryを使用しますが、ホスティングページについては何も知りません。
ホスティングコードは、jQueryバージョンをロードし、ロードされたことを検出し、それを使用して作業を開始し、待機（setTimeout）してからコードを開始し、＆quot; jQuery.noConflict（true）;＆quot;を実行します。 、ロードされるまで待機します。コードが待機している間、コントロールはホスティングコードに戻り、jQueryを実行しようとして、存在しないことがわかります。
この場合の私の提案は、jQueryを別の新しいウィンドウにロードし、元のウィンドウから削除しないことです。次に、ロードされたら、＆quot; jQuery.noConflict（true）;＆quot;を使用します。新しいウィンドウで元のウィンドウにコピーします。ただし、新しいjQueryオブジェクトは、実際には新しいウィンドウとそのドキュメントで実行されています。そのため、新しいjQueryを使用する場合、元のwindow.documentを次のように2番目のパラメーターとして渡す必要があります。
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
