jQuery 检测浏览器 IE9 及以下并抛出模态进行升级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19562207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Detect browser IE9 and below and throw up a modal to upgrade
提问by John
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.
我希望能够使用 jQuery 检测 IE9 或更少（或者是否有更好的方法？）。如果浏览器版本是 IE9 或更低版本，我想加载一个带有升级到 Chrome、FF 等选项的模式。
I have read that $.browser doesn't work anymore, so just wondering what the best way is to achieve what I want:
我已经读到 $.browser 不再工作了，所以只是想知道实现我想要的最佳方法是什么：
$(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!");
}
});
回答by Sam Jones
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.")
}
回答by Rupert Madden-Abbott
Don't use jQuery for detecting IE versions. Use conditional comments instead.
不要使用 jQuery 来检测 IE 版本。改用条件注释。
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!
为什么？好好想想你为什么要首先针对这些旧版本。这可能是因为它们不支持您需要的某些 JS/CSS 功能。那么你真的想维护你自己的 JS 代码，你肯定会在这些旧版本中运行吗？如果你走那条路，那么你需要开始考虑你编写的检测代码是否可以在 IE6、5 或 4 中工作......痛苦！
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.
- 将您的模态/横幅元素添加到您的 HTML 中。
- 在您的主 css 文件中，使用 display: none 隐藏此元素。这确保了最新版本的 IE 和非 IE 浏览器不会看到它。
- 创建将显示此元素的仅限 IE 的 css 或 js 文件。
- 将此文件包含在针对所需 IE 版本的条件注释中。
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.
下面的示例使用 CSS 进行简单的显示，但如果您愿意，可以轻松地将其替换为 JS。只是不要让它太复杂，否则它很容易在早期的 IE 版本中崩溃。
#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.
这是一个有用的条件注释参考。
回答by xicooc
var isIE9OrBelow = function()
{
return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}
回答by Rohan Kumar
$.browser()is remove in jquery version 1.9use below code in your script,
$.browser()在jquery 1.9 版中被删除，在你的脚本中使用下面的代码，
(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);
