IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法
IEでzenbackとjQueryのコンフリクトによる不具合を回避する方法を紹介します。
１．問題
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では正常に動作しなくなるようです。
具体的には共倒れになります（全然具体的じゃないｗ）。
２．原因
zenback内部でもjQueryを読み込んでいるため、jQueryのコンフリクトが発生し、zenbackやjQueryプラグインが正常に動作しなくなるようです。
ということで、対処方法をいくつか紹介します。
３．対処１
zenbackの公式サイトにコンフリクトを解消する方法が記載されています。
具体的には下記の2点です。
- jQueryの関数名を'$'で利用するのではなく、'jQuery'で開始するようにする。
- jQuery lightBox pluginなどのプラグインでは、プラグイン内部で利用するjQueryのバージョンを、コンフリクトしないようなバージョンのjQueryに変更
４．対処２
対処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 -->
５．対処３
さらに対処方法がないかネットで調べたところありましたので、紹介します。
まず、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の結合が行われるようです。共通するメソッドは、先に読み込んだ方が優先されるようです。
６．対処４
５項と似ていますが、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>サンプルでは分かりませんが、zenbackがページに表示されていない状態でもjQueryプラグインは正常に動作します。
７．その他
本件とは関係ありませんが、Ajaxで読み込ませたコンテンツに対してjQueryプラグインを適用させる場合にも、IEではzenbackとコンフリクトするようです。
具体的には当ブログのサイドバーの各リストをAjaxで読み込ませたあと、jQueryプラグインで折りたたみさせているのですが、折りたたみ用のjQueryプラグインが認識されません。
zenbackは正常に表示されます。
８．参考
参考サイトは下記です。ありがとうございました。
≫ Zenback と jQuery 混ぜるな危険問題 from Green Rabbit
様々なサイトで活用されているブログパーツの一つに Zenback がありますが，jQuery を使用しているサイトで Zenback を使用すると正常に動... [続きを読む]
