jQuery 检测浏览器 IE9 及以下并抛出一个升级模式
Posted
技术标签:
【中文标题】jQuery 检测浏览器 IE9 及以下并抛出一个升级模式【英文标题】：jQuery Detect browser IE9 and below and throw up a modal to upgrade 【发布时间】：2013-11-02 22:34:24 【问题描述】：我希望能够使用 jQuery 检测 IE9 或更低版本（或者是否有更好的方法？）。如果浏览器版本是 IE9 或更低，我想加载一个带有升级到 Chrome、FF 等选项的模式。
我已经读到 $.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!");
);
【问题讨论】：
仅对 IE9 使用条件注释。这样您就不必担心会嗅到丑陋的用户代理字符串。 可以参考这个msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx 尽管这个问题很老并且已经有了答案，但我觉得有必要建议您不要使用模式来提醒您的用户。较旧的浏览器无法正确处理模式的显示，因此如果用户使用 IE5，例如，可能不会出现警报。 【参考方案1】：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.")
【讨论】：
注意 IE 11 不再包含MSIE。【参考方案2】：
不要使用 jQuery 来检测 IE 版本。请改用条件 cmets。
为什么？好吧，首先考虑一下为什么要针对这些旧版本。这可能是因为它们不支持您需要的某些 JS/CSS 功能。那么你真的想维护你自己的 JS 代码，你确定会在这些旧版本中运行吗？如果你走那条路，那么你需要开始考虑你编写的检测代码是否可以在 IE6 或 5 或 4 中工作......很痛苦！
请尝试以下方法：
-
将模态/横幅元素添加到 html。
在您的主 css 文件中，使用 display: none 隐藏此元素。这可确保最新版本的 IE 和非 IE 浏览器不会看到它。
创建一个仅用于 IE 的 css 或 js 文件以显示此元素。
将此文件包含在针对所需 IE 版本的条件 cmets 中。
下面的示例使用 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
这是一个有用的conditional comments reference。
【讨论】：
【参考方案3】：var isIE9OrBelow = function()
return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
【讨论】：
navigator.appVersion.split("MSIE")[1] 是一个字符串，而不是一个数字，例如：`9.0；视窗 NT 6.1；哇64;三叉戟/5.0； SLCC2; .NET CLR 2.0.50727； .NET CLR 3.5.30729； .NET CLR 3.0.30729；媒体中心PC 6.0； .NET4.0C； .NET4.0E； MS-RTC LM 8)`【参考方案4】：
$.browser() 已在 jquery version 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);
【讨论】：
【参考方案5】：从Sitepoint调整：
if(navigator.appVersion.indexOf("MSIE 9.") !== -1)
【讨论】：
只检测 IE9。也不检测较低的 IE 版本。以上是关于jQuery 检测浏览器 IE9 及以下并抛出一个升级模式的主要内容，如果未能解决你的问题，请参考以下文章
解决输入框placeholder属性不兼容IE9及以下浏览器问题
填个小坑，Vue不支持IE8及以下，跨域ajax不支持IE9
js或者jQuery实现在ie9以下浏览器中自动出现升级提示