jQuery 使用スクリプトを Google Chrome 対応で微調整

Google Chrome はレンダリングエンジンに Safari と同じ Webkit を使用している。
そのため jQuery 1.2.6 では Safari として認識される。
# jQuery では、ユーザーエージェントに webkit の文字があると Safari として認識するため

しかし、JavaScript エンジンは独自の V8 を使用しているため、jQuery をそのまま使用すると、微妙に不具合が発生する。
すべては調べきれていないが、概ねエレメントの位置取得で問題が発生している感じだ。

私が JSeries でリリースしているプラグインでは、大抵 JavaScript で jQuery を使用しているため、一挙に微調整をした。
バージョンアップしたのは、以下の5つのプラグイン。

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 と同様の処理。

2 thoughts on “jQuery 使用スクリプトを Google Chrome 対応で微調整

  1. をかもと 投稿作成者

    yutaka さん、どもです。

    WP-lightpop 最新版 Ver.0.6.2ですが、ダウンロードして解凍するとjquery.lightpop
    になりますが、同じ物ですか?

    うわ、リンク間違ってた 😯 直しておきました。
    正しいリンク先は https://sourceforge.jp/projects/wppluginsj/downloads/33156/wp-lightpop-0.6.2.zip です。

    ちなみに間違ってたリンク先のモノは jQuery 用のプラグインだけで WordPress 用のファイルを含まないモノです。

    返信
  2. yutaka

    こんばんわ〜
    WP-lightpop 最新版 Ver.0.6.2ですが、ダウンロードして解凍するとjquery.lightpop
    になりますが、同じ物ですか?

    返信

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください