Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular判断在那个浏览器下打开的服务 #29

Closed
Wscats opened this issue Jun 15, 2016 · 0 comments
Closed

Angular判断在那个浏览器下打开的服务 #29

Wscats opened this issue Jun 15, 2016 · 0 comments
Labels

Comments

@Wscats
Copy link
Owner

Wscats commented Jun 15, 2016

.service('OrderFrom', [
    function() {
        var OrderFrom = {
            browser: {
                versions: function() {
                    var u = navigator.userAgent,
                        app = navigator.appVersion;
                    return { //移动终端浏览器版本信息
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                        iPad: u.indexOf('iPad') > -1, //是否iPad
                        webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
                    };
                }(),
                language: (navigator.browserLanguage || navigator.language).toLowerCase()
            },
            from: function(e) {
                if (this.browser.versions.mobile) { //判断是否是移动设备打开。browser代码在上面面
                    var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
                    if (ua.match(/MicroMessenger/i) == "micromessenger") {
                        //在微信中打开
                        return e?this.debug("weixin"):"weixin";
                    }
                    if (ua.match(/WeiBo/i) == "weibo") {
                        //在新浪微博客户端打开
                        return e?this.debug("weibo"):"weibo";
                    }
                    if (ua.match(/QQ/i) == "qq") {
                        //在QQ空间打开
                        return e?this.debug("Qzone"):"Qzone";
                    }
                    if (this.browser.versions.ios) {
                        //是否在IOS浏览器打开
                        return e?this.debug("ios"):"ios";
                    }
                    if (this.browser.versions.android) {
                        //是否在安卓浏览器打开
                        return e?this.debug("android"):"android";
                    }else{
                        return e?this.debug("browser"):"browser";
                    }
                } else {
                    //否则就是PC浏览器打开
                    return e?this.debug("PC"):"PC";
                }
            },
            debug: function(e){
                alert(e);
            }
        }
        return OrderFrom;
    }
])

在Angular里面写上以上的服务代码就可以在控制器中注入这个服务,以达到获取访问该单页面应用时所在的浏览器信息

angular.module('wscatApp').controller('exampleCtrl', ['$rootScope', '$scope','OrderFrom',
    function($rootScope, $scope, OrderFrom) {
    console.log(OrderFrom.from("debug"));
}])

如上面代码的示例一样,我们可以获取OrderFrom对象,得到以下信息
image
如图我们可以从versions里面得知我们是否Android或者IOS系统,是否移动端,是否iPhone等等的信息
console.log(OrderFrom.from("debug"));
当我们去调用它的时候,可以往里面传debug参数,方便我们在移动端调试的时候alert出必要的信息
image
当然我们也可以在PC端的控制台里面获取我们需要的结果

@Wscats Wscats added the notes label Jun 15, 2016
@Wscats Wscats closed this as completed Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant