IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法

IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法

Posted at May 2,2012 3:00 AM
Tag:[jQuery, TroubleShooting, zenback]

IEでzenbackjQueryのコンフリクトによる不具合を回避する方法を紹介します。

1.問題

IEでzenbackとjQueryプラグイン(例えばjQuery ligthboxプラグイン)を併用する場合、次のようなソースコードになると思います。(zenbackのコードは便宜上改行しています)。赤色がjQueryプラグイン、青色がzenbackです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>
…中略…
<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//user-domain/&nsid=01234567890123345%3A%3A01234567890123345&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
<!-- X:E ZenBackWidget -->

FirefoxやGoogle Chromeであれば、zenbackもligthboxプラグインも動作しますが、IEでは正常に動作しなくなるようです。

具体的には共倒れになります(全然具体的じゃないw)。

IEで動作しないサンプル
IEで動作しないサンプル

2.原因

zenback内部でもjQueryを読み込んでいるため、jQueryのコンフリクトが発生し、zenbackやjQueryプラグインが正常に動作しなくなるようです。

ということで、対処方法をいくつか紹介します。

3.対処1

zenbackの公式サイトにコンフリクトを解消する方法が記載されています。

jQueryを利用しているブログで、IEでの閲覧が上手く動かない場合の対応方法について

具体的には下記の2点です。

  • jQueryの関数名を'$'で利用するのではなく、'jQuery'で開始するようにする。
  • jQuery lightBox pluginなどのプラグインでは、プラグイン内部で利用するjQueryのバージョンを、コンフリクトしないようなバージョンのjQueryに変更

4.対処2

対処1のひとつめと同じかもしれませんが、noConflict()を使って、次のように修正を行うことで動作するようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function() {
    $j('#gallery a').lightBox();
});
</script>
…中略…
<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//user-domain/&nsid=01234567890123345%3A%3A01234567890123345&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
<!-- X:E ZenBackWidget -->

IEで動作するサンプル1
IEで動作するサンプル1

5.対処3

さらに対処方法がないかネットで調べたところありましたので、紹介します。

まず、zenbackのコードの後方(body終了タグの直前など)に、jQueryのコードをまるっと移動します。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//user-domain/&nsid=01234567890123345%3A%3A01234567890123345&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
<!-- X:E ZenBackWidget -->
…中略…
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>

そして、jQueryを読み込んだ直後に、異なるバージョンのjQueryを結合するための内容(赤色部分)を追加します。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//user-domain/&nsid=01234567890123345%3A%3A01234567890123345&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
<!-- X:E ZenBackWidget -->
…中略…
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
var $ = jQuery = jQuery.noConflict().extend(true, $);
</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>

これでjQueryの結合が行われるようです。共通するメソッドは、先に読み込んだ方が優先されるようです。

IEで動作するサンプル2
IEで動作するサンプル2

6.対処4

5項と似ていますが、jQueryのコードをzenbackの後方に移動したあと、読み込むjQueryをzenbackのものに依存させるという手です。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//user-domain/&nsid=01234567890123345%3A%3A01234567890123345&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
<!-- X:E ZenBackWidget -->
…中略…
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>

IEで動作するサンプル3
IEで動作するサンプル3

サンプルでは分かりませんが、zenbackがページに表示されていない状態でもjQueryプラグインは正常に動作します。

7.その他

本件とは関係ありませんが、Ajaxで読み込ませたコンテンツに対してjQueryプラグインを適用させる場合にも、IEではzenbackとコンフリクトするようです。

具体的には当ブログのサイドバーの各リストをAjaxで読み込ませたあと、jQueryプラグインで折りたたみさせているのですが、折りたたみ用のjQueryプラグインが認識されません。

zenbackは正常に表示されます。

8.参考

参考サイトは下記です。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Zenback と jQuery 混ぜるな危険問題 from Green Rabbit
様々なサイトで活用されているブログパーツの一つに Zenback がありますが,jQuery を使用しているサイトで Zenback を使用すると正常に動... [続きを読む]

Tracked on May 7, 2012 10:59 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)