Google Chrome はレンダリングエンジンに Safari と同じ Webkit を使用している。
そのため jQuery 1.2.6 では Safari として認識される。
# jQuery では、ユーザーエージェントに webkit の文字があると Safari として認識するため
しかし、JavaScript エンジンは独自の V8 を使用しているため、jQuery をそのまま使用すると、微妙に不具合が発生する。
すべては調べきれていないが、概ねエレメントの位置取得で問題が発生している感じだ。
私が JSeries でリリースしているプラグインでは、大抵 JavaScript で jQuery を使用しているため、一挙に微調整をした。
バージョンアップしたのは、以下の5つのプラグイン。
- WP-AutoPager 最新版 Ver.0.5.0a
- VideoPop+ 最新版 Ver.0.7.1a
- WP-lightpop 最新版 Ver.0.6.2
- Google Maps Anywhere 最新版 Ver.0.6.5a
- Quick Comments 最新版 Ver.0.5.4
jQuery で、ブラウザの種類とバージョンを特定するには jQuery.browser の各プロパティを利用する。
今回、これを拡張して Chrome も特定できるようにしたので、そのソースを晒しておく。
(function(jQuery){ var userAgent = navigator.userAgent.toLowerCase(); jQuery.browser = jQuery.extend( jQuery.browser ,{ version: ((!/chrome/.test( userAgent ) ? userAgent.match( /.+(?:rv|it|ra|ie)[/: ]([d.]+)/ ) : userAgent.match( /.+chrome/([d.]+)/ ) ) || [])[1] , safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ), chrome: /chrome/.test( userAgent ) } ); if (jQuery.browser.chrome) { jQuery.fn.extend({ ready: function(fn) { // Attach the listeners bindReady(); // If the DOM is already ready if ( jQuery.isReady ) // Execute the function immediately fn.call( document, jQuery ); // Otherwise, remember the function for later else // Add the function to the wait list jQuery.readyList.push( function() { return fn.call(this, jQuery); } ); return this; } }); var readyBound = false; function bindReady(){ if ( readyBound ) return; readyBound = true; var numStyles; (function(){ if ( jQuery.isReady ) return; if ( document.readyState != "loaded" && document.readyState != "complete" ) { setTimeout( arguments.callee, 0 ); return; } if ( numStyles === undefined ) numStyles = jQuery("style, link[rel=stylesheet]").length; if ( document.styleSheets.length != numStyles ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); })(); // A fallback to window.onload, that will always work jQuery.event.add( window, "load", jQuery.ready ); } } })(jQuery);
2 〜 10 行目は jQuery.browser.version, jQuery.browser.safari をオーバーライドし、さらに jQuery.browser.chrome を追加して Chrome に対応させています。
12 〜 57 行目は Chrome 用に jQuery(document).reqdy() をオーバーライドしています。
# 実際には Webkit を用いている Safari と同様の処理。
yutaka さん、どもです。
うわ、リンク間違ってた 😯 直しておきました。
正しいリンク先は https://sourceforge.jp/projects/wppluginsj/downloads/33156/wp-lightpop-0.6.2.zip です。
ちなみに間違ってたリンク先のモノは jQuery 用のプラグインだけで WordPress 用のファイルを含まないモノです。
こんばんわ〜
WP-lightpop 最新版 Ver.0.6.2ですが、ダウンロードして解凍するとjquery.lightpop
になりますが、同じ物ですか?