操作
把“IeOutTips”文件夹放到项目根目录“js”文件夹下面;
如:
项目文件夹》js》IeOutTips
文件引用
建议:放到所有JS顶部
<script src="/js/IeOutTips/IeOutTips.js"></script>
【2022-8-3 对代码进行了升级,可识别 IE11】
/*IE低版本提示*/
IeMinTipsHTML = '<div id="IeMinTip" style="border: 4px solid #FFF500; background: #FDFDC8; text-align: center; clear: both; width:780px; height: 100px; position: absolute; z-index:999999999; top: 2px; bottom: 2px; padding:0 8px;">' +
'<div style="position: absolute; right: 3px; top: 3px; font-weight: bold;z-index:999999999; display:none;"><a href="#" onclick="javascript:this.parentNode.parentNode.style.display=\"none\";return false;">关闭</a></div>' +
'<div style="width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;">' +
'<div style="width: 675px; float: left;">' +
'<div style="font-size: 16px; font-weight: bold; margin-top: 12px;">您使用的IE浏览器版本过低</div>' +
'<div style="font-size: 13px; margin-top: 6px; line-height: 16px;">为了让您的优质使用体验,请升级到 ' +
'<a href="https://support.microsoft.com/zh-cn/topic/internet-explorer-%E4%B8%8B%E8%BD%BD-d49e1f0d-571c-9a7b-d97e-be248806ca70" target="_blank">最新版本IE浏览器</a>,' +
'或者使用其他高级浏览器如<br/><br/>'+
'<a href="https://www.google.cn/chrome/" target="_blank"><img src="/js/IeOutTips/guge.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">Chrome(谷歌浏览器)</a>' +
'<a href="https://ie.sogou.com/" target="_blank"><img src="/js/IeOutTips/sougou.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">搜狗浏览器</a>' +
'<a href="https://browser.qq.com/" target="_blank"><img src="/js/IeOutTips/qq.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">QQ浏览器</a>' +
'<a href="https://browser.360.cn/" target="_blank"><img src="/js/IeOutTips/360.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">360浏览器</a>' +
'<a href="http://www.firefox.com.cn/" target="_blank"><img src="/js/IeOutTips/huohu.png" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">火狐浏览器</a>' +
'</div></div></div></div>';
var DEFAULT_VERSION = "11.0";
// console.log(navigator)
var ua = navigator.userAgent.toLowerCase();
// console.log(ua)
var isIE = ua.indexOf("msie") > -1;
var isIE11 = ua.indexOf("rv:") > -1;
var IEINFO_V = ua.match(/rv:([\d]+)/);//IE版本号
IEINFO_V=isIE11==true?IEINFO_V[1]:0;
// console.log('IEINFO_V===',IEINFO_V);
var safariVersion;
// console.log("isIE===" + isIE)
if (isIE) {
safariVersion = ua.match(/msie ([\d.]+)/)[1]; //获取浏览器版本号
if(!IEINFO_V){IEINFO_V=safariVersion;}
// console.log("isIE===" + safariVersion*1)
}
if (safariVersion * 1 <= DEFAULT_VERSION * 1) { //若版本号低于IE9,则跳转到如下页面
// alert(11111111111)
// window.location.href = "https://www.baidu.com/"; //提示页面(修改路径)
document.write(IeMinTipsHTML);
document.getElementById("IeMinTip").style.left=(window.innerWidth-780)/2+"px";
}
// console.log('IEINFO_V===',IEINFO_V);
/*IE低版本提示 end*/
各个浏览器的信息
通过下面代码获取的浏览器信息
var ua = navigator.userAgent.toLowerCase();
360浏览器
mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/86.0.4240.198 safari/537.36
关键点:
chrome/86.0.4240.198
safari/537.36
qq浏览器
mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/94.0.4606.71 safari/537.36 core/1.94.191.400 qqbrowser/11.5.5245.400
关键点:
chrome/94.0.4606.71
safari/537.36 core/1.94.191.400
qqbrowser/11.5.5245.400
IE 11 浏览器-版本信息
mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; infopath.3; rv:11.0) like gecko
关键点:rv:11.0
IE 10 浏览器-版本信息
mozilla/5.0 (compatible; msie 10.0; windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; infopath.3)
关键点:msie 10.0
IE 9 浏览器-版本信息
mozilla/5.0 (compatible; msie 9.0; windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; infopath.3)
关键点:msie 9.0
IE 8 浏览器-版本信息
mozilla/4.0 (compatible; msie 8.0; windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; infopath.3)
关键点:msie 8.0
IE 7 浏览器-版本信息
mozilla/4.0 (compatible; msie 7.0; windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; infopath.3)
关键点:msie 7.0
根据以上信息,我们可以把IE浏览器判断改成如下
1.关键点代码
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie") > -1;
var safariVersion;
//console.log(ua)
if (isIE) {
safariVersion = ua.match(/msie ([\d.]+)/)[1]; //获取浏览器版本号
}else{
isIE = ua.indexOf("rv:") > -1;
try {
safariVersion = ua.match(/rv:([\d.]+)/)[1]; //获取浏览器版本号
} catch (error) {
isIE=false;
safariVersion='0';
}
}
2.完整代码
/*IE低版本提示*/
IeMinTipsHTML = '<div id="IeMinTip" style="border: 4px solid #FFF500; background: #FDFDC8; text-align: center; clear: both; width:780px; height: 100px; position: absolute; z-index:999999999; top: 2px; bottom: 2px; padding:0 8px;">' +
'<div style="position: absolute; right: 3px; top: 3px; font-weight: bold;z-index:999999999; display:none;"><a href="#" onclick="javascript:this.parentNode.parentNode.style.display=\"none\";return false;">关闭</a></div>' +
'<div style="width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;">' +
'<div style="width: 675px; float: left;">' +
'<div style="font-size: 16px; font-weight: bold; margin-top: 12px;">您使用的IE浏览器版本过低</div>' +
'<div style="font-size: 13px; margin-top: 6px; line-height: 16px;">为了让您的优质使用体验,请升级到 ' +
'<a href="https://support.microsoft.com/zh-cn/topic/internet-explorer-%E4%B8%8B%E8%BD%BD-d49e1f0d-571c-9a7b-d97e-be248806ca70" target="_blank">最新版本IE浏览器</a>,' +
'或者使用其他高级浏览器如<br/><br/>'+
'<a href="https://www.google.cn/chrome/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/guge.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">Chrome(谷歌浏览器)</a>' +
'<a href="https://ie.sogou.com/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/sougou.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">搜狗浏览器</a>' +
'<a href="https://browser.qq.com/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/qq.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">QQ浏览器</a>' +
'<a href="https://browser.360.cn/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/360.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">360浏览器</a>' +
'<a href="http://www.firefox.com.cn/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/huohu.png" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">火狐浏览器</a>' +
'</div></div></div></div>';
var DEFAULT_VERSION = "9.0";
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie") > -1;
var safariVersion;
//console.log(ua)
if (isIE) {
safariVersion = ua.match(/msie ([\d.]+)/)[1]; //获取浏览器版本号
}else{
isIE = ua.indexOf("rv:") > -1;
try {
safariVersion = ua.match(/rv:([\d.]+)/)[1]; //获取浏览器版本号
} catch (error) {
isIE=false;
safariVersion='0';
}
}
if (safariVersion * 1 <= DEFAULT_VERSION * 1) { //若版本号低于IE9,则跳转到如下页面
// alert(11111111111)
// window.location.href = "https://www.baidu.com/"; //提示页面(修改路径)
document.write(IeMinTipsHTML);
document.getElementById("IeMinTip").style.left=(window.innerWidth-780)/2+"px";
}
/*IE低版本提示 end*/
console.log('isIE=='+isIE+'///safariVersion=='+(safariVersion*1)+'///DEFAULT_VERSION=='+(DEFAULT_VERSION * 1))
2023-2-13代码优化-最新完整代码
var IE_Safari={}
/*IE低版本提示*/
IE_Safari.IeMinTipsHTML = '<div id="IeMinTip" style="border: 4px solid #FFF500; background: #FDFDC8; text-align: center; clear: both; width:780px; height: 100px; position: absolute; z-index:999999999; top: 2px; bottom: 2px; padding:0 8px;">' +
'<div style="position: absolute; right: 3px; top: 3px; font-weight: bold;z-index:999999999; display:none;"><a href="#" onclick="javascript:this.parentNode.parentNode.style.display=\"none\";return false;">关闭</a></div>' +
'<div style="width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;">' +
'<div style="width: 675px; float: left;">' +
'<div style="font-size: 16px; font-weight: bold; margin-top: 12px;">您使用的IE浏览器版本过低</div>' +
'<div style="font-size: 13px; margin-top: 6px; line-height: 16px;">为了让您的优质使用体验,请升级到 ' +
'<a href="https://support.microsoft.com/zh-cn/topic/internet-explorer-%E4%B8%8B%E8%BD%BD-d49e1f0d-571c-9a7b-d97e-be248806ca70" target="_blank">最新版本IE浏览器</a>,' +
'或者使用其他高级浏览器如<br/><br/>'+
'<a href="https://www.google.cn/chrome/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/guge.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">Chrome(谷歌浏览器)</a>' +
'<a href="https://ie.sogou.com/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/sougou.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">搜狗浏览器</a>' +
'<a href="https://browser.qq.com/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/qq.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">QQ浏览器</a>' +
'<a href="https://browser.360.cn/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/360.jpg" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">360浏览器</a>' +
'<a href="http://www.firefox.com.cn/" target="_blank"><img src="/StaticFile/js/common/IeOutTips/huohu.png" width="22" height="22" style="border:none; margin-left:10px; margin-right:10px">火狐浏览器</a>' +
'</div></div></div></div>';
IE_Safari.DEFAULT_VERSION = "10.0";
IE_Safari.ua = navigator.userAgent.toLowerCase();
IE_Safari.isIE = IE_Safari.ua.indexOf("msie") > -1;
IE_Safari.safariVersion;
//console.log(IE_Safari.ua)
if (IE_Safari.isIE) {
IE_Safari.safariVersion = IE_Safari.ua.match(/msie ([\d.]+)/)[1]; //获取浏览器版本号
}else{
IE_Safari.isIE = IE_Safari.ua.indexOf("rv:") > -1;
try {
IE_Safari.safariVersion = IE_Safari.ua.match(/rv:([\d.]+)/)[1]; //获取浏览器版本号
} catch (error) {
IE_Safari.isIE=false;
IE_Safari.safariVersion='99999';
}
}
if ((IE_Safari.safariVersion * 1) <= (IE_Safari.DEFAULT_VERSION * 1)) { //若版本号低于IE10,则跳转到如下页面
// alert(11111111111)
// window.location.href = "https://www.baidu.com/"; //提示页面(修改路径)
document.write(IE_Safari.IeMinTipsHTML);
document.getElementById("IeMinTip").style.left=(window.innerWidth-780)/2+"px";
}
/*IE低版本提示 end*/
console.log('IE_Safari',IE_Safari)
//console.log('isIE=='+IE_Safari.isIE+'///safariVersion=='+(IE_Safari.safariVersion*1)+'///DEFAULT_VERSION=='+(IE_Safari.DEFAULT_VERSION * 1))