及川WEB室 >
JavaScript > jQuery と prototype.js のコンフリクト（競合）について
jQuery と prototype.js のコンフリクト（競合）について
Google Maps API では jQuery を使用する。こちらのGoogle Mapsのページ のGoogleマップの表示で、ハマったのは、jQuery と prototype.js のコンフリクト（競合）。
このページでは、下位バージョンのIEで表示したときに「IE6 No More」を表示すようにしており、「IE6 No More」を表示するのに prototype.js を使用している。
その prototype.js が、jQuery とコンフリクト（競合）し、Googleマップ がきちんと動作しなかった。
jQuery日本語リファレンス Prototype JavaScript framework: a foundation for ambitious web applications
jQuery と prototype.js のコンフリクト（競合）の対処法。
3つの対策をした。「$」をjQuery として動作するようにする。
jQueryの「noConflict」を使う（下記のサンプルの5行目）。「$」は prototype.js でも、jQuery でも使われ、競合してしまう。
jQuery では「$」は、様々な要素に使われる。
prototype.js では「$」は、「document.getElementById」の代わりに使われる。
下記のサンプルの7行目「// この中では「$」は jQuery として動作。」の箇所に、Google Maps のコードを入れた。
【サンプル】
// ライブラリを読み込む順番は、prototype.jsを先に、jquery.js を後にする。※6行目の「jQuery(document).ready(function($){」の「$」に注意。
◆「jQuery(document).ready(function($){」の場合：
「$()」はjQueryとして扱われる。
◆「jQuery(document).ready(function(){」の場合：
「$()」はprotoypeとして扱われ、jQueryは「jQuery()」と記述する必要がある。
私の場合、Google Maps のコードを外部ファイル化して読み込んでいるので、外部ファイルにした javascript のファイル内に、「jQuery.noConflict();」の設定を記述した。
Google Maps のコードを記述したファイル内の最初に
jQuery.noConflict();
jQuery(document).ready(function($){
を記述して、最後に
}); // 以下、「$」はprototype.js として動作。を記述した。
参考サイト： prototype.jsと同時に使うには - jQuery 日本語リファレンス
「$」を「document.getElementById」に。
jQuery では $("#ID名") のように記述して ID名要素を指定する。prototype.jsでは「$」は、「document.getElementById」の代わりに使われる。
なので、jQuery用に「$("#ID名")」と記述している箇所は「document.getElementById("#ID名")」を使う。
【サンプルHTML】 （「address」はテキストエリアのID名とした場合。）
【修正前：jQuery】
var address=$("#address").val();
【修正後：javascript】
var address = document.getElementById("address").value;
参考サイト： 小粋空間: HighSlide JS と prototype.js の競合を解消する
for-in文 ではなく for文で。
prototype.js では array に対しても拡張しており、「for-in文」を使うときちんと動作しないらしい。そのため、「for-in文」は使わず「for文」を使う。
【修正前：for-in文】
for(i in overlays){
overlays[i].setMap(null);
}
【修正後：for文】
for(var i=0; i < overlays.length; i++ ){
overlays[i].setMap(null);
}
参考サイト： 小粋空間: HighSlide JS と prototype.js の競合を解消する