How to detect IE11?
Internet ExplorerDebuggingInternet Explorer-11Browser DetectionForward CompatibilityInternet Explorer Problem Overview
When I want to detect IE I use this code:
function getInternetExplorerVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
if ( ver > -1 )
{
msg = "You are using IE " + ver;
}
alert( msg );
}
But IE11 is returning "You're not using Internet Explorer". How can I detect it?
Internet Explorer Solutions
Solution 1 - Internet Explorer
IE11 no longer reports as MSIE, according to this list of changes it's intentional to avoid mis-detection.
What you can do if you really want to know it's IE is to detect the Trident/ string in the user agent if navigator.appName returns Netscape, something like (the untested);
function getInternetExplorerVersion()
{
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
else if (navigator.appName == 'Netscape')
{
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
console.log('IE version:', getInternetExplorerVersion());
Note that IE11 (afaik) still is in preview, and the user agent may change before release.
Solution 2 - Internet Explorer
Use !(window.ActiveXObject) && "ActiveXObject" in window to detect IE11 explicitly.
To detect any IE (pre-Edge, "Trident") version, use "ActiveXObject" in window instead.
Solution 3 - Internet Explorer
Use MSInputMethodContext as part of a feature detection check. For example:
//Appends true for IE11, false otherwise
window.location.hash = !!window.MSInputMethodContext && !!document.documentMode;
References
Solution 4 - Internet Explorer
I've read your answers and made a mix. It seems to work with Windows XP(IE7/IE8) and Windows 7 (IE9/IE10/IE11).
function ie_ver(){
var iev=0;
var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
var trident = !!navigator.userAgent.match(/Trident\/7.0/);
var rv=navigator.userAgent.indexOf("rv:11.0");
if (ieold) iev=new Number(RegExp.$1);
if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
if (trident&&rv!=-1) iev=11;
return iev;
}
Of course if I return 0, means no IE.
Solution 5 - Internet Explorer
Get IE Version from the User-Agent
var ie = 0;
try { ie = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ )[ 2 ]; }
catch(e){}
How it works: The user-agent string http://www.useragentstring.com/pages/Internet%20Explorer/">for all IE versions includes a portion "MSIE space version" or "Trident other-text rv space-or-colon version". Knowing this, we grab the version number from a String.match() regular expression. A try-catch block is used to shorten the code, otherwise we'd need to test the array bounds for non-IE browsers.
Note: The user-agent can be spoofed or omitted, sometimes unintentionally if the user has set their browser to a "compatibility mode". Though this doesn't seem like much of an issue in practice.
Get IE Version without the User-Agent
var d = document, w = window;
var ie = ( !!w.MSInputMethodContext ? 11 : !d.all ? 99 : w.atob ? 10 :
d.addEventListener ? 9 : d.querySelector ? 8 : w.XMLHttpRequest ? 7 :
d.compatMode ? 6 : w.attachEvent ? 5 : 1 );
How it works: Each version of IE adds support for https://msdn.microsoft.com/en-us/library/bg182625">additional features not found in previous versions. So we can test for the features in a top-down manner. A https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">ternary</a> sequence is used here for brevity, though if-then and switch statements would work just as well. The variable ie is set to an integer 5-11, or 1 for older, or 99 for newer/non-IE. You can set it to 0 if you just want to test for IE 1-11 exactly.
Note: Object detection may break if your code is run on a page with third-party scripts that add polyfills for things like document.addEventListener. In such situations the user-agent is the best option.
Detect if the Browser is Modern
If you're only interested in whether or not a browser supports most HTML 5 and CSS 3 standards, you can http://caniuse.com/">reasonably assume that IE 8 and lower remain the primary problem apps. Testing for window.getComputedStyle will give you a fairly good mix of modern browsers, as well (IE 9, FF 4, Chrome 11, Safari 5, Opera 11.5). IE 9 greatly improves on standards support, but native CSS animation requires IE 10.
var isModernBrowser = ( !document.all || ( document.all && document.addEventListener ) );
Solution 6 - Internet Explorer
Angular JS does this way.
msie = parseInt((/msie (\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1]);
if (isNaN(msie)) {
msie = parseInt((/trident\/.*; rv:(\d+)/.exec(navigator.userAgent.toLowerCase()) || [])[1]);
}
msie will be positive number if its IE and NaN for other browser like chrome,firefox.
why ?
As of Internet Explorer 11, the user-agent string has changed significantly.
refer this :
Solution 7 - Internet Explorer
solution :
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
if ((GetIEVersion() > 0) || (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)){
alert("This is IE " + GetIEVersion());
}else {
alert("This no is IE ");
}
Solution 8 - Internet Explorer
I'm using a simpler method:
The navigator global object has a property touchpoints, in Internet Exlorer 11 is called msMaxTouchPoints tho.
So if you look for:
navigator.msMaxTouchPoints !== void 0
You will find Internet Explorer 11.
Solution 9 - Internet Explorer
var ua = navigator.userAgent.toString().toLowerCase();
var match = /(trident)(?:.*rv:([\w.]+))?/.exec(ua) ||/(msie) ([\w.]+)/.exec(ua)||['',null,-1];
var rv = match[2];
return rv;
Solution 10 - Internet Explorer
Try This:
var trident = !!navigator.userAgent.match(/Trident\/7.0/);
var net = !!navigator.userAgent.match(/.NET4.0E/);
var IE11 = trident && net
var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
if(IE11 || IEold){
alert("IE")
}else{
alert("Other")
}
Solution 11 - Internet Explorer
This appears to be a better method. "indexOf" returns -1 if nothing is matched. It doesn't overwrite existing classes on the body, just adds them.
// add a class on the body ie IE 10/11
var uA = navigator.userAgent;
if(uA.indexOf('Trident') != -1 && uA.indexOf('rv:11') != -1){
document.body.className = document.body.className+' ie11';
}
if(uA.indexOf('Trident') != -1 && uA.indexOf('MSIE 10.0') != -1){
document.body.className = document.body.className+' ie10';
}
Solution 12 - Internet Explorer
Detect most browsers with this:
var getBrowser = function(){
var navigatorObj = navigator.appName,
userAgentObj = navigator.userAgent,
matchVersion;
var match = userAgentObj.match(/(opera|chrome|safari|firefox|msie|trident)\/?\s*(\.?\d+(\.\d+)*)/i);
if( match && (matchVersion = userAgentObj.match(/version\/([\.\d]+)/i)) !== null) match[2] = matchVersion[1];
//mobile
if (navigator.userAgent.match(/iPhone|Android|webOS|iPad/i)) {
return match ? [match[1], match[2], mobile] : [navigatorObj, navigator.appVersion, mobile];
}
// web browser
return match ? [match[1], match[2]] : [navigatorObj, navigator.appVersion, '-?'];
};
Solution 13 - Internet Explorer
I used the onscroll event at the element with the scrollbar. When triggered in IE, I added the following validation:
onscroll="if (document.activeElement==this) ignoreHideOptions()"
Solution 14 - Internet Explorer
Only for IE Browser:
var ie = 'NotIE'; //IE5-11, Edge+
if( !!document.compatMode ) {
if( !("ActiveXObject" in window) ) ) ie = 'EDGE';
if( !!document.uniqueID){
if('ActiveXObject' in window && !window.createPopup ){ ie = 11; }
else if(!!document.all){
if(!!window.atob){ie = 10;}
else if(!!document.addEventListener) {ie = 9;}
else if(!!document.querySelector){ie = 8;}
else if(!!window.XMLHttpRequest){ie = 7;}
else if(!!document.compatMode){ie = 6;}
else ie = 5;
}
}
}
use alert(ie);
Testing:
var browserVersionExplorer = (function() {
var ie = '<s>NotIE</s>',
me = '<s>NotIE</s>';
if (/msie\s|trident\/|edge\//i.test(window.navigator.userAgent) && !!(document.documentMode || document.uniqueID || window.ActiveXObject || window.MSInputMethodContext)) {
if (!!window.MSInputMethodContext) {
ie = !("ActiveXObject" in window) ? 'EDGE' : 11;
} else if (!!document.uniqueID) {
if (!!(window.ActiveXObject && document.all)) {
if (document.compatMode == "CSS1Compat" && !!window.DOMParser ) {
ie = !!window.XMLHttpRequest ? 7 : 6;
} else {
ie = !!(window.createPopup && document.getElementById) ? parseFloat('5.5') : 5;
}
if (!!document.documentMode && !!document.querySelector ) {
ie = !!(window.atob && window.matchMedia) ? 10 : ( !!document.addEventListener ? 9 : 8);
}
} else ie = !!document.all ? 4 : (!!window.navigator ? 3 : 2);
}
}
return ie > 1 ? 'IE ' + ie : ie;
})();
alert(browserVersionExplorer);
[Update 01 Jun 2017][1]
Now we could use something easier and simpler:
var uA = window.navigator.userAgent,
onlyIEorEdge = /msie\s|trident\/|edge\//i.test(uA) && !!( document.uniqueID || window.MSInputMethodContext),
checkVersion = (onlyIEorEdge && +(/(edge\/|rv:|msie\s)([\d.]+)/i.exec(uA)[2])) || NaN;
[1]: http://jsfiddle.net/Webnewbie/apa1nvu8/ "Detecting Windows Internet Explorer and Microsoft Edge More Effectively"
Solution 15 - Internet Explorer
Quite frankly I would say use a library that does what you need (like platform.js for example). At some point things will change and the library will be equipped for those changes and manual parsing using regular expressions will fail.
Thank god IE goes away...
Solution 16 - Internet Explorer
Use DetectOS.js. This is a simple JS definition for popular operating systems and browsers without dependencies:
class DetectOS {
constructor() {
this.browser = this.searchString(this.dataBrowser())
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion)
this.OS = this.searchString(this.dataOS())
}
searchString(data) {
for (let i = 0; i < data.length; i++) {
let
dataString = data[i].string,
dataProp = data[i].prop
this.versionSearchString = data[i].versionSearch || data[i].identity
if (dataString) {
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity
}
} else if (dataProp) {
return data[i].identity
}
}
}
searchVersion(dataString) {
let index = dataString.indexOf(this.versionSearchString)
if (index === -1) return
return parseFloat(dataString.substring(index+this.versionSearchString.length + 1))
}
dataBrowser() {
return [
/***************
* Chrome
***************/
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
/***************
* Safari
***************/
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
/***************
* For Older Opera (12.18-)
***************/
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
/***************
* Internet Explorer 10
***************/
{
string: navigator.userAgent,
subString: "MSIE",
identity: "IE10",
versionSearch: "MSIE"
},
/***************
* Internet Explorer 11
***************/
{
string: navigator.userAgent,
subString: "Trident",
identity: "IE11",
versionSearch: "rv"
},
/***************
* Edge
***************/
{
string: navigator.userAgent,
subString: "Edge",
identity: "Edge",
versionSearch: "Edge"
},
/***************
* Firefox
***************/
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
/***************
* For Older Netscapes (4-)
***************/
{
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
},
/***************
* For Newer Netscapes (6+)
***************/
{
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
/***************
* Other Browsers
***************/
{
string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
}
]
}
dataOS() {
return [
{
string: navigator.platform,
subString: 'Win',
identity: 'Windows'
},
{
string: navigator.platform,
subString: 'Mac',
identity: 'macOS'
},
{
string: navigator.userAgent,
subString: 'iPhone',
identity: 'iOS'
},
{
string: navigator.userAgent,
subString: 'iPad',
identity: 'iOS'
},
{
string: navigator.userAgent,
subString: 'iPod',
identity: 'iOS'
},
{
string: navigator.userAgent,
subString: 'Android',
identity: 'Android'
},
{
string: navigator.platform,
subString: 'Linux',
identity: 'Linux'
}
]
}
}
const Detect = new DetectOS()
console.log("We know your browser – it's " + Detect.browser + " " + Detect.version);
console.log("We know your OS – it's " + Detect.OS);
console.log("We know everything about you.");