Question

我需要检查我的应用程序是否支持浏览器，并按以下方式执行此操作：

main.js（主要require.js模块）

define(['underscore', 'backbone', 'views/mainView', 'views/oldBrowser', 'ui', function(_, Backbone, mainView, oldBrowser){

var _browserHandshaking = function(){
    var browserSupportedCookie = $.cookie('browserSupported');
    var browserNameCookie = $.cookie('browserName');
    var browserVersionCookie = $.cookie('browserVersion');

    if(browserSupportedCookie === null){
        if(/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'chrome';
        } else if(/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'opera';
            /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
        } else if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
            $.ui.browserName = 'ie';
        } else if(/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'safari';
            /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
        } else if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
            $.ui.browserName = 'firefox';
        } else if(/webOS/i.test(navigator.userAgent)){
            $.ui.browserName = 'webos';
        } else if(/Android/i.test(navigator.userAgent)){
            $.ui.browserName = 'android'
        } else if(/iPhone/i.test(navigator.userAgent)){
            $.ui.browserName = 'iphone';
        } else if(/iPod/i.test(navigator.userAgent)){
            $.ui.browserName = 'ipod';
        } else if(/BlackBerry/i.test(navigator.userAgent)){
            $.ui.browserName = 'blackberry';
        }

        if($.ui.browserName !== false){

            // Set browser version.
            if(!$.ui.browserVersion){
                $.ui.browserVersion = parseFloat(new Number(RegExp.$1));
            }

            for(var browserName in $.ui.supportedBrowsers){
                if($.ui.browserName === browserName){
                    if($.ui.browserVersion >= $.ui.supportedBrowsers[browserName]){
                        $.ui.browserSupported = true;
                        break;
                    }
                }
            }

            $.cookie('browserVersion', $.ui.browserVersion, { expires: 7 });
            $.cookie('browserName', $.ui.browserName, { expires: 7 });
            $.cookie('browserSupported', $.ui.browserSupported, { expires: 7 });
        }           
    } else {
        $.ui.browserSupported = browserSupportedCookie;
        $.ui.browserName = browserNameCookie;
        $.ui.browserVersion = browserVersionCookie;
    }
};

_browserHandshaking.call(this);

var Router = Backbone.Router.extend({
    routes: {
        "old-browser": "oldBrowser",
        "*actions": "main",
    },
    oldBrowser: function(){
        oldBrowser.render();
    },
    main: function(){
        mainView.render();
    }
});

$.ui.router = new Router();

// Start routing.
Backbone.history.start({
    pushState: true,
    root: $.ui.rootDir
});

});

Backbone.js中是否有一个函数在每个动作都触发，我可以很容易地实现它：

preRouting: function(){
  if(!$.ui.browserSupported){
    return false;
  }

  return true;
}

我只需要检查一下，如果支持浏览器，如果支持它可以调用mainView，否则应该触发oldBrowser视图，我只是不想在每个路由函数调用时执行此操作。 / p>

有人有更好的解决方案吗？并且有人知道是否可以创建一个基本上是路由函数调用的限制器的检查。

感谢您的帮助：）

Answer 1

根据评论，您可以通过以下方式检查推送状态:(来自Can use pushState）

var hasPushstate = !!(window.history && history.pushState);

css3动画:(来自Detect css transitions using javascript (and without modernizr)?）

function supportsTransitions() {
    var b = document.body || document.documentElement;
    var s = b.style;
    var p = 'transition';
    if(typeof s[p] == 'string') {return true; }

    // Tests for vendor specific prop
    v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
    p = p.charAt(0).toUpperCase() + p.substr(1);
    for(var i=0; i<v.length; i++) {
      if(typeof s[v[i] + p] == 'string') { return true; }
    }
    return false;
}
var hasCSS3Transitions = supportsTransitions();

如果您只是检查浏览器是否具有您的应用程序所需的功能，则无需检查浏览器名称/版本。

Requirejs，Backbonejs浏览器支持功能

1 个答案: