检测浏览器版本并升级jQuery插件

前言

因为项目使用的是angular.js1.4，但从1.2开始angular对IE9以下的内核不再支持了。而国内还有需要用户使用的是360和firfox浏览器。我就在找一个提醒用户进行更新的方法。

这是一种解决方式，但是在angular环境中不能使用，自定义创建的弹出层无法append到body里。因为angular执行时，body还没有创建。然后代码报错。页面就停止加载。所以，如果要解决这个问题，就需要在body加载前处理。

我使用的方式是，检测浏览器版本，系统版本如果过旧的话。直接跳转到新页面，在新页面下载浏览器。

demo

<linkhref="~/jReject/css/jquery.reject.css"rel="stylesheet"/>
<scriptsrc="~/jReject/js/jquery.reject.js"></script>
<scriptsrc="jquery-1.9.1.min.js"></script>
<scripttype="text/javascript">
$(function() {
needDownloadNewExplorer();
});
function needDownloadNewExplorer() {
setTimeout(function () {
$.reject({
reject: {
safari: true, // Apple Safari
chrome: true, // Google Chrome
firefox: true, // Mozilla Firefox
msie: true, // Microsoft Internet Explorer
opera: true, // Opera
konqueror: true, // Konqueror (Linux)
unknown: true // Everything else
},
imagePath: './jReject/images/',
browserInfo: { // Settings for which browsers to display
chrome: {
// Text below the icon
text: 'Google Chrome',
// URL For icon/text link
url: 'http://rj.baidu.com/soft/detail/14744.html',
// (Optional) Use "allow" to customized when to show this option
// Example: to show chrome only for IE users
// allow: { all: false, msie: true }
},
firefox: {
text: 'Mozilla Firefox',
url: 'http://rj.baidu.com/soft/detail/11843.html'
},
safari: {
text: 'Safari',
url: 'http://www.apple.com/safari/download/'
},
opera: {
text: 'Opera',
url: 'http://www.opera.com/download/'
},
msie: {
text: 'Internet Explorer',
url: 'http://www.microsoft.com/windows/Internet-explorer/'
}
},
closeLink: '关闭此窗口',
header: '如果本网页显示有问题，请选择下载如下浏览器的最新版本', // Header Text
paragraph1: '', // Paragraph 1
paragraph2: '',
closeMessage: '' // Message below close window link
}); // Customized Browsers
}, 2000);
}
</script>

执行的结果如下

注意修改图片存放路径



这个插件需要用到jQuery，jQuery的版本要2.0以下的。因为2.0以上的版本不再支持IE9以下。

这个插件的github地址为 https://github.com/TurnWheel/jReject
页面的demo地址为 http://jreject.turnwheel.com/

我使用的方式

window.location.href="http://baidu.com"//跳转新页面

下面这个是在360网站找到的check浏览器内核和操作系统版本的代码
http://se.360.cn/v5/laboratory6.htm //这个是360检测浏览器内核的网站。可以直接查看源代码如下：

<script>
var bs = "<span>浏览器内核：</span><span class='big'>非IE内核</span>";
user_agent = navigator.userAgent.toLowerCase();

if (user_agent.indexOf("msie 10.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE10</span>";
}else if (user_agent.indexOf("msie 9.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE10（兼容模式）</span>";
}else if (user_agent.indexOf("msie 8.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE10（兼容模式）</span>";
}else if (user_agent.indexOf("msie 7.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE10（兼容模式）</span>";
}else if(user_agent.indexOf("msie 9.0")>-1) {
bs = "<span>浏览器内核：</span><span class='big'>IE9</span>";
}else if (user_agent.indexOf("msie 7.0")>-1&&user_agent.indexOf("trident/5.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE9（兼容模式）</span>";
}else if (user_agent.indexOf("msie 8.0")>-1&&user_agent.indexOf("trident/5.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE9（兼容模式）</span>";
}else if(user_agent.indexOf("msie 8.0")>-1) {
bs = "<span>浏览器内核：</span><span class='big'>IE8</span>";
}else if(user_agent.indexOf("msie 7.0")>-1&&user_agent.indexOf("trident/4.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE8（兼容模式）</span>";
}else if(user_agent.indexOf("msie 7.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE7</span>";
}else if(user_agent.indexOf("msie 6.0")>-1){
bs = "<span>浏览器内核：</span><span class='big'>IE6</span>";
}

var os={
'5.0':'Windows 2000',
'5.2':'Windows 2003',
'5.1':'Windows Xp',
'6.0':'Windows Vista',
'6.1':'Windows 7',
'6.2':'Windows 8'
};
if(user_agent.match(/windows\s*nt\s*([0-9.]+)/))
{
if(os[RegExp.$1])
{
os = os[RegExp.$1];
}
}else{
os = window.navigator.platform;
}
document.getElementById('browser').innerHTML = bs+ "<br/><span>操作系统：</span><span class='big'>"+os+"</span>";
</script>