及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川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つの対策をした。
  1. 「$」をjQuery として動作するようにする。
  2. 「$」を「document.getElementById」に。
  3. for-in文 ではなく for文で。

「$」を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 の競合を解消する
MENU Ξ