jQuery Detect browser IE9 and below and throw up a modal to upgrade
Question
I want to be able to detect IE9 or less using jQuery (or if there's a better method?). If the browser version is IE9 or less I then want to load a modal with the option to upgrade to Chrome, FF etc.
I have read that $.browser doesn't work anymore, so just wondering what the best way is to achieve what I want:
$(document).ready(function(){
/* Get browser */
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
/* Detect Chrome */
if($.browser.chrome){
/* Do something for Chrome at this point */
alert("You are using Chrome!");
/* Finally, if it is Chrome then jQuery thinks it's
Safari so we have to tell it isn't */
$.browser.safari = false;
}
/* Detect Safari */
if($.browser.safari){
/* Do something for Safari */
alert("You are using Safari!");
}
});
5 answers
solution1
16 2013-10-24 09:44:20
var browser = {
isIe: function () {
return navigator.appVersion.indexOf("MSIE") != -1;
},
navigator: navigator.appVersion,
getVersion: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1)
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
return version;
}
};
if (browser.isIe() && browser.getVersion() <= 9) {
console.log("You are currently using Internet Explorer" + browser.getVersion() + " or are viewing the site in Compatibility View, please upgrade for a better user experience.")
}
solution2
11 ACCPTED 2013-10-24 09:54:02
Don't use jQuery for detecting IE versions. Use conditional comments instead.
Why? Well think about why you want to target these old versions in the first place. It is probably because they don't support certain JS/CSS features that you need. So do you really want to maintain your own JS code that you are sure will run in these older versions? If you go that route then you need to start thinking about whether the detection code you write will work in IE6 or 5 or 4... painful!
Instead try the following:
- Add your modal/banner element to your HTML.
- In your main css file, hide this element using display: none. This ensures that recent versions of IE and non-IE browsers will not see it.
- Create an IE only css or js file that will reveal this element.
- Include this file inside conditional comments that target the IE versions that you want.
The example below uses a simple reveal using CSS but you can easily replace this with JS if you prefer. Just don't make it too complicated or it could easily break in early IE versions.
#index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie-only.css">
<![endif]-->
</head>
<body>
<div class="ie-only">Go upgrade your browser!</div>
</body>
</html>
#main.css
.ie-only { display: none }
#ie-only.css
.ie-only { display: block }
Here is a useful conditional comments reference .
solution3
3 2015-04-24 02:00:03
var isIE9OrBelow = function()
{
return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}
solution4
0 2013-10-24 09:36:55
$.browser() is remove in jquery version 1.9 use below code in your script,
(function($) {
var matched, browser;
// Use of jQuery.browser is frowned upon.
// More details: http://api.jquery.com/jQuery.browser
// jQuery.uaMatch maintained for back-compat
jQuery.uaMatch = function( ua ) {
ua = ua.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
return {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
};
// Don't clobber any existing jQuery.browser in case it's different
if ( !jQuery.browser ) {
matched = jQuery.uaMatch( navigator.userAgent );
browser = {};
if ( matched.browser ) {
browser[ matched.browser ] = true;
browser.version = matched.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
browser.webkit = true;
} else if ( browser.webkit ) {
browser.safari = true;
}
jQuery.browser = browser;
}
})(jQuery);
solution5
0 2016-12-29 10:31:51
从Sitepoint调整：
if(navigator.appVersion.indexOf("MSIE 9.") !== -1)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.