通过 jQuery UI 对话框进行用户决策的移动检测/重定向

Question

I am trying to use the the JS Redirection Mobile library written by Sebastiano Armeli-Battana .

By default it will automatically redirect the user to the mobile site if it detects that the user is using a mobile device, which is a practice I dislike.

I want to give the user the opportunity to agree to the redirection . Sebastiano has thankfully included a beforeredirection_callback , which I want to use to offer the user a choice in a dialog. Since the website in question is heavily invested in jQuery UI, I am trying to use the jQuery UI Dialog. The jQuery Dialog does not have a return value, but can execute a callback.

I believe that the problem is more to do with variable scope than anything else. Can anyone see a solution to the problem? How can I return the args value to the parent callback?

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://example.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);

In page:

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

Answer 1

Forget all that crap and just put a button near the top left so the user can select either the mobile or full site at their discretion. "Mobile" detection is flakey at best, given the plethora of devices with a variety of screen resolutions flooding into the market.

A simple button avoids all that and empowers users.

Or you can use a simple script based on screen size (which is likely as reliable as any other method), but still offer the option of the full site.

Answer 2

The JavaScript execution has passed through beforeredirection_callback long before the event handler is dealt with. I decided instead to write my own plugin:

/**
 * 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);