Angular 2如果不支持浏览器如何显示警告页面答案

【问题标题】：Angular 2 How to show warning page if browser is unsupportedAngular 2如果不支持浏览器如何显示警告页面
【发布时间】：2018-02-17 08:50:56
【问题描述】：

如果 Angular 2 应用程序不支持浏览器，我在演示警告页面时遇到问题。我曾尝试使用路由系统，但实际上并没有帮助。这是我的索引页。如果不支持浏览器，如何重定向（显示给用户）警告页面？也许我需要在正文中添加一些额外的脚本，但是<app> 标签呢？

<!DOCTYPE html>
<html>
<head>
    <base href="/">
</head>
<body>
    <app>Loading...</app>
</body>
</html>

【问题讨论】：

重复？：stackoverflow.com/questions/36877151/…

标签： angular angular2-routing

【解决方案1】：

我认为你应该使用清晰的 JavaScript 代码：

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

更多检测更多浏览器的方法可以在这个问题中找到：Correct way to use Modernizr to detect IE?

如果您想在您的 Angular 应用程序中支持 IE 11/10/9 - 添加 polyfill。对于较旧的 IE 版本检测，请使用以下代码：

function detectIE() {
var ua = window.navigator.userAgent;

var msie = ua.indexOf('MSIE ');
if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}

var trident = ua.indexOf('Trident/');
if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}

var edge = ua.indexOf('Edge/');
if (edge > 0) {
   // Edge (IE 12+) => return version number
   return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}

// other browser
return false;
}

或

<!--[if lt IE 9]>
Place Content here for Users of Internet Explorer 9 or lower.
<![endif]-->

在 HTML 代码中。

【讨论】：

好的，如果我要编写干净的 javascript 代码，我应该如何处理标签。我可以将它从 DOM 中删除吗？如果可以，应该什么时候做？我想你已经提到了，我是 Angular 的新手。
是的，您可以删除标签（但您应该在 AngularJS 代码之前加载此脚本）或将用户重定向到带有不支持消息的静态页面，例如：yourdomain/browser-not-supported.html（这是首选方式）
哇，那是一堆简单的代码if (/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent)) { window.location.replace("unsupported.html"); }

【解决方案2】：

如果您不需要知道哪个浏览器或版本，则以其他方式存在。

在index.html中，查看app-root标签的内容。

...
<script>
  function checkSupport() {
    var appRoot = document.getElementsByTagName('app-root')[0];
    if (appRoot && appRoot.innerHTML === '') {
      appRoot.innerHTML = '<h1>Old Browser Man!</h1> <p>Please, be smart and update it!</p>';
    }
  }
</script>

<body class="mat-typography theme" onload="checkSupport()">
  <app-root></app-root>
</body>
...

【讨论】：