サイトにドロップするコードのスニペットで構成されるウィジェットを作成しています。このウィジェットは、js を介してコンテンツを取り込みます。スニペットの例を次に示します。
<div data-token="bc1cea6304e8" id="my-widget">
<script src="http://localhost:8080/assets/eg-widget.js" type="text/javascript"></script>
</div>
ページに既に jQuery があるかどうかを確認するテストを行っています。ある場合は、バージョンが少なくとも 1.5 であることを確認します。
if (typeof jQuery == 'undefined' || isVersion("1.5", ">")) {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js");
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else { // Other browsers
script_tag.onload = scriptLoadHandler;
}
} else {
// The jQuery version on the window is the one we want to use
jQueryEg = window.jQuery;
scriptLoadHandler();
}
いずれの場合も、使用することにした jQuery に変数 jQueryEg を設定して、競合を回避できるようにします。
jQuery がまだ読み込まれていない場合は、すべて問題ありません。ただし、古いバージョンがロードされている場合、jQuery-ui などの他のライブラリをロードしようとすると競合が発生します。
これを行うには、window.jQuery を新しくロードした jQuery に設定して、jquery-ui と bootstrap.js をロードするときに、window.jQuery または $ への参照が正しいバージョンを指すようにします。
問題は、window.jQuery を私たちのバージョンに設定したのと同時に、ページの他の部分が jQuery を呼び出すことがあり、それが問題を引き起こすことです。
これらの競合を回避する方法について何か考えはありますか?
jQueryEg = window.jQuery.noConflict(true);
window.jQueryEg = jQueryEg;
// jquery-ui reference window.jQuery so we need to set that to our new jquery for a sec
if (jQueryEg.ui == undefined || jQueryEg.ui.datepicker == undefined) {
var otherjQuery = window.jQuery;
window.jQuery = jQueryEg;
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
script_tag.onload = function () {
window.jQuery = otherjQuery;
main();
};
}