Topサービスzenback > 2012年5月
2012年5月 2日

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

May 2,2012 3:00 AM
Tag:[, , ]
Permalink

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.参考

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

Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3