2012-05-11 13 views
0

JS Redirection Mobileライブラリwritten by Sebastiano Armeli-Battanaを使用しようとしています。モバイル検出/リダイレクトとjQuery UIダイアログ

デフォルトではが自動的にになります。ユーザーがモバイルデバイスを使用していることが検出された場合はモバイルサイトにリダイレクトされます。これは嫌いな練習です。

私はユーザにへの機会を与えたいと思います。に同意します。 Sebastianoに感謝してbeforeredirection_callbackが含まれています。これを使用してダイアログに選択肢を提供します。問題のWebサイトはjQuery UIに多額の投資をしているので、jQuery UIダイアログを使用しようとしています。 jQuery Dialogには戻り値はありませんが、コールバックを実行できます。

私は、この問題は他のものよりも可変スコープであると考えています。誰にでも問題の解決策が見えますか? argsの値を親のコールバックに戻すにはどうすればよいですか?

events.js:

// declare namespace if not already defined 
var RP = window.RP || {}; 

RP.events = { 
    DetectedSiteSelection: "RP.Detect.onDetectedSiteSelection" 
}; 

detect.js:ページで

// declare namespace if not already defined 
var RP = window.RP || {}; 

// route-manager.js 
(function ($, undefined) { 

    var init = function() { 

     var mobileSelectorDialog = $('<div></div>') 
      .html("<p>We have detected that you are browsing our website using a mobile device.</p><p>Click 'Yes' to use our mobile site, or click 'No' to stay on the desktop site.</p>") 
      .dialog({ 
       title: 'Do you want to use our mobile site?', 
       bgiframe: true, 
       autoOpen: false, 
       minHeight: 200, 
       width: 350, 
       modal: true, 
       closeOnEscape: false, 
       draggable: false, 
       resizable: false, 
       buttons: { 
        'Yes': function() { 
         $(this).dialog('close'); 
         $(document).trigger(RP.events.DetectedSiteSelection, true); 
        }, 
        'No': function() { 
         $(this).dialog('close'); 
         $(document).trigger(RP.events.DetectedSiteSelection, false); 
        } 
       } 
     }); 

     SA.redirection_mobile ({ 
      mobile_url : "http://site.com/mobile/", 
      noredirection_param:"noredirection", 
      cookie_hours : "2", 
      beforeredirection_callback : (function() { 

       // open dialog 
       mobileSelectorDialog.dialog('open'); 

       // this needs to return true or false to beforeredirection_callback 
       // but it doesn't work (scope issue??) 
       $(document).on(RP.events.DetectedSiteSelection, function (evt, args) { 
        return args; 
       }); 

       // return true or false for this to work 
      }) 
     }); 
    }; 

    RP.Detect = { 
     Init: init 
    }; 

    return true; 

})(jQuery); 

// Mobile browser detection 
RP.Detect.Init(); 
+0

同僚はおそらく非同期の問題であると指摘しました。 JavaScriptの実行は、イベントハンドラが処理されるずっと前に 'beforeredirection_callback'を通過しています。 – Junto

答えて

0

JavaScriptの実行は、イベントハンドラが処理されるよりずっと前にbeforeredirection_callbackを通過しました。代わりに私自身のプラグインを書くことにしました:

/** 
* MOBILE.DETECT 
* Offers the user a chance to be redirected to a mobile site alternative. 
* Optionally remember that choice. 
* 
* requires PERSIST.js, jQueryUI Dialog, and http://detectmobilebrowsers.com/ 
* 
**/ 

// declare namespace if not already defined 
var MOBILE = window.MOBILE || {}; 

// events.js 
MOBILE.events = { 
    DetectedSiteSelection: "MOBILE.Detect.onDetectedSiteSelection" 
}; 

// mobile-detection.js 
(function ($, undefined) { 

    var options = { 
     key: "redirection", 
     mobileUrl: "http://mobile.site.com/" 
    }; 

    // Constants 
    State = { 
     REDIRECT: "REDIRECT", 
     NOREDIRECT: "NOREDIRECT", 
     RESET: "RESET" 
    }; 

    // vars 
    var store; // Persist.JS 

    // handles the triggered callback 
    var handleCallback = function (evt, args) { 

     // (re)store result 
     setStore(args); 

     // redirect if preference is to redirect 
     if (args === State.REDIRECT) { 
      document.location.href = options.mobileUrl; 
     } 
    }; 

    // store the preference 
    var setStore = function(val) { 
     store.set(options.key, val); // setting preference 
    }; 

    // get the preference 
    var getStore = function() { 
     return State[store.get(options.key)]; 
    }; 

    // gets a query string value 
    var getQueryValue = function (param) { 

     if (!param) { 
      return; 
     } 

     var querystring = document.location.search, 
      queryStringArray = querystring && querystring.substring(1).split("&"), 
      i = 0, 
      length = queryStringArray.length; 

     for (; i < length; i++) { 
      var token = queryStringArray[i], 
       firstPart = token && token.substring(0, token.indexOf("=")); 
      if (firstPart === param) { 
       return token.substring(token.indexOf("=") + 1, token.length); 
      } 
     } 

    }; 

    // gets the query string (key) value 
    var checkQuery = function() { 
     return State[getQueryValue(options.key)]; 
    }; 

    // inits this instance 
    var init = function (_options) { 

     // extend basic options 
     $.extend(options, _options); 

     // initialise store 
     store = new Persist.Store('MobilePrefs'); 

     // handle event 
     $(document).on(MOBILE.events.DetectedSiteSelection, handleCallback); 

     // check query 
     var query = checkQuery(); // 'true', 'false', undefined 
     if (query === State.RESET) { 
      store.remove(options.key); // remove this key entirely 
     } else if (query != undefined) { 
      $(document).trigger(MOBILE.events.DetectedSiteSelection, query); // set redirection preference 
     } 

     // is mobile browser? 
     if ($.browser.mobile) { 

      // check previous value 
      var state = getStore(); 
      if (state === undefined) { 

       // define dialog 
       var mobileSelectorDialog = $('<div></div>') 
        .html("<p>We have detected that you are browsing our website using a mobile device.</p><p>Click 'Yes' to use our mobile site, or click 'No' to stay on the desktop site.</p>") 
        .dialog({ 
         title: 'Do you want to use our mobile website?', 
         bgiframe: true, 
         autoOpen: false, 
         minHeight: 200, 
         width: 350, 
         modal: true, 
         closeOnEscape: false, 
         draggable: false, 
         resizable: false, 
         buttons: { 
          'Yes': function() { 
           $(this).dialog('close'); 
           $(document).trigger(MOBILE.events.DetectedSiteSelection, State.REDIRECT); 
          }, 
          'No': function() { 
           $(this).dialog('close'); 
           $(document).trigger(MOBILE.events.DetectedSiteSelection, State.NOREDIRECT); 
          } 
         } 
       }); 

       // open dialog 
       mobileSelectorDialog.dialog('open'); 

      } else if (state === State.REDIRECT) { 
       $(document).trigger(MOBILE.events.DetectedSiteSelection, State.REDIRECT); // trigger event 
      } 
     } 
    }; 

    // definition 
    MOBILE.Detect = { 
     Init: init 
    }; 

})(jQuery); 

/** 
* jQuery.browser.mobile (http://detectmobilebrowser.com/) 
* 
* jQuery.browser.mobile will be true if the browser is a mobile device 
* 
**/ 
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera); 
0

すべてのそのがらくたを忘れて、ちょうどので、左上の近くにボタンを配置ユーザは自分の裁量でモバイルサイトまたはフルサイトのいずれかを選択できます。さまざまな画面解像度を持つ多数のデバイスが市場に流入していることを考えると、「モバイル」検出は最高です。

シンプルなボタンは、すべてのユーザーや権限を持つユーザーを避けます。

また、画面サイズに基づいた簡単なスクリプト(他の方法と同じように信頼性が高い)を使用することもできますが、フルサイトのオプションは引き続き使用できます。

+0

私はこの提案に感謝しますが、設計は完了しています。私はプロジェクトの後半に、この種の変化に影響を与えることはできません。 – Junto

+0

設計者の間違った選択の影響が、管理者とユーザーに表示されます。自分たちのデザインを維持するようにしている人々の一部を得ることは良いでしょう。 – RobG

関連する問題