Frontend: Internet Explorer problems

Question

How is it possible to check in javascript that the user has opened the application in internet Explorer? For that case, I would like to replace some elements that are not supported in IE.

Many thanks!

Answer 1

You can detect IE version with Javascript.

 // Get IE or Edge browser version var version = detectIE(); if (version === false) { document.getElementById('result').innerHTML = '<s>IE/Edge</s>'; } else if (version >= 12) { document.getElementById('result').innerHTML = 'Edge ' + version; } else { document.getElementById('result').innerHTML = 'IE ' + version; } // add details to debug result document.getElementById('details').innerHTML = window.navigator.userAgent; /** * detect IE * returns version of IE or false, if browser is not Internet Explorer */ function detectIE() { var ua = window.navigator.userAgent; // Test values; Uncomment to check result … // IE 10 // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)'; // IE 11 // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko'; // Edge 12 (Spartan) // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0'; // Edge 13 // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586'; 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; } 

 @import url(https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans:300); body { color: black; background-color: white; font-family: "Fira Sans", sans-serif; font-weight: 300; margin: 0; padding: 3rem; } h1 { color: darkgrey; text-align: center; font-weight: 300; font-size: 1.5rem; line-height: 2rem; } h2 { text-align: center; font-weight: 300; font-size: 4rem; } p { color: darkgrey; text-align: center; font-family: "Fira Mono", monospace; font-size: 1rem; line-height: 1.5rem; } 

 <h1>Detect IE/Edge version with JavaScript.<br> Updated to recognize Internet Explorer 12+ aka Edge.</h1> <h2 id="result">detecting…</h2> <p id="details">n/a</p> 

I hope this helps you.