fix(no-ie): add js snipped to check for internet explorer (#445)

check for ie links to open pb in other common browsers
T-Systems-MMS · Mar 10, 2020 · 5dc9f7c · 5dc9f7c
1 parent 3cbfa3d
commit 5dc9f7c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git a/Phonebook.Frontend/src/index.html b/Phonebook.Frontend/src/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <script src="./no-ie.js"></script>
     <!-- Deactivate Compatibility Mode in IE -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Phonebook</title>
@@ -28,7 +29,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-
   <body class="mat-typography">
     <app-root></app-root>
     <noscript>Please enable JavaScript to continue using this application.</noscript>
@@ -47,5 +47,39 @@
     } else {
       top.location = self.location;
     }
+    msieversion();
+
+    function openURL(e) {
+      browser = e.getAttribute('value');
+      if (browser == 'microsoft-edge') {
+        //edge can not be opened via shell
+        window.open((browser = e.getAttribute('value') + ':' + window.location.href));
+      } else {
+        new ActiveXObject('WScript.Shell').run(browser + ' ' + window.location.href);
+      }
+    }
+
+    function msieversion() {
+      var browserList = {
+        //list of browser-links where app can be openend in: key=browser name, value=shell-command to open browser
+        'Microsoft Edge': 'microsoft-edge',
+        'Google Chrome': 'chrome',
+        'Mozilla Firefox': 'firefox',
+        Opera: 'opera'
+      };
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf('MSIE ');
+
+      if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
+        // stone age browser IE
+        var html =
+          '<div class="pb-no-ie"><p><strong>This application does not support Internet Explorer!</strong></p><p>To run the Phonebook, please use one of the following modern browsers:</p><ul>';
+        for (var key in browserList) {
+          html += '<li onclick="openURL(this)" value="' + browserList[key] + '"><strong>' + key + '</strong></li>';
+        }
+        html += '</ul></div>';
+        document.getElementsByTagName('body')[0].innerHTML = html;
+      }
+    }
   </script>
 </html>
diff --git a/Phonebook.Frontend/src/no-ie.js b/Phonebook.Frontend/src/no-ie.js
@@ -0,0 +1,12 @@
+function msieversion() {
+  var ua = window.navigator.userAgent;
+  var msie = ua.indexOf('MSIE ');
+
+  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
+    // stone age browser IE
+    console.log('not supported');
+    var html =
+      '<p><strong>Please notice: This app does not support Internet Explorer!</strong></p><p><strong>To run the Phonebook, please use one of the following modern browsers:</strong></p><ul><li><strong><a href="microsoft-edge:#">Edge</a></strong></li><li><strong>Chrome</strong></li><li><strong>Firefox</strong></li><li><strong>Opera</strong></li></ul>';
+    document.getElementsByTagName('body')[0].innerHTML = html;
+  }
+}
diff --git a/Phonebook.Frontend/src/styles.scss b/Phonebook.Frontend/src/styles.scss
@@ -181,7 +181,17 @@ app-root {
     margin: auto 1%;
   }
 }
-
+.pb-no-ie {
+  top: 38%;
+  left: 38%;
+  position: absolute;
+}
+.pb-no-ie li {
+  cursor: pointer;
+  &:hover {
+    color: #9b9e9e;
+  }
+}
 //Media query classes
 @include on-med-and-up {
   .pb-hide-on-med-and-up {