使用 Angular 进行浏览器检测答案

【问题标题】：Browser detection using Angular使用 Angular 进行浏览器检测
【发布时间】：2016-12-11 22:09:33
【问题描述】：

我的项目要求在用户使用旧浏览器时显示过时的浏览器消息。

我正在使用角度 1.5.5。我尝试使用在支持角度的浏览器上工作的 angular-bowser 模块，但问题来自像 IE8 这样的旧版本，它不支持我的角度版本。所以 angular-bowser 模块不起作用。

有人可以告诉我任何其他方式或一些图书馆或任何可以帮助的事情吗？

【问题讨论】：

你试过用原生javascript检查浏览器版本吗？
modernizr 可能有帮助，虽然我不知道任何具体的实现来帮助 Angular 兼容性。一般来说，更好的做法是使用浏览器进行特征检测。
试试这个 $window.navigator.userAgent
Browser detection in JavaScript?的可能重复

标签： javascript angularjs browser-detection

【解决方案1】：

因为 angularjs 不仅仅依赖于 angular 模块，您可以像这样使用原生 javascript 来检测浏览器版本：

JAVASCRIPT：

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem, 
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

//Invoke 
navigator.sayswho;

您可以使用此功能来确定您的 Angular 应用程序中的当前浏览器和版本，并相应地执行您的消息对话框。类似的东西

JAVASCRIPT

var version = navigator.sayswho;

if (version <= 8) {
    alert("Browser outdated! Please update browser!");
    return false; //don't forget.
}

【讨论】：

【解决方案2】：

let isMobile = /Android|iPhone/i.test(window.navigator.userAgent)

【讨论】：

【解决方案3】：

我建议看看 Bowser；它的唯一目的是浏览器检测。查看详情here

【讨论】：

【解决方案4】：

你可以用这个

$scope.isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
$scope.isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
$scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
$scope.isChrome = !!window.chrome && !$scope.isOpera; // Chrome 1+
$scope.isIE = /*@cc_on!@*/ false || !!document.documentMode; // At least IE6


function getDevice() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (userAgent.match(/iPhone/i) || userAgent.match(/Android/i)) {
     // you can write code here for mobile
  }
}

function hasGetUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (!hasGetUserMedia()) {
  alert('Your browser is not supported. Please switch to Google Chrome or Mozilla Firefox.');
}

只有当前浏览器的值为真

【讨论】：