JS判断不同的浏览器和版本，提示浏览器版本过低，兼容IE8到IE11

产品需求

页面顶部提示用户下载并使用 360 极速浏览器的极速模式，该提示可以手动关闭，兼容 IE8-IE11。

需求由来

项目网站不支持 IE11 及以下，有的人用低版本的浏览器打开页面显示错乱功能无法正常使用。

实现效果

如果不是谷歌内核的浏览器则出现下载提示，如果是谷歌内核的浏览器但内核版本低于 86 的则出现下载提示，最终效果如下图：

不是谷歌内核的浏览器出现的提示

是谷歌内核的浏览器但内核版本低于 86 出现的提示

源码

复制粘贴到 HTML 中即可生效

<script type="text/javascript">
(function () {var sys = {};var ua = navigator.userAgent.toLowerCase();var s;(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :(s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :(s = ua.match(/rv:([\d.]+)/)) ? sys.ie = s[1] :(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;var browser = "Unknown";dvar tip = document.createElement('div')var closeBtn = document.createElement('img')var contentHTML = '您当前使用的浏览器可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用最新的 360 极速浏览器并切换到极速模式。';var endHTML = '&nbsp;&nbsp;&nbsp;&nbsp;<a href="../assets/360cse_13.0.2216.0.exe" target="_blank" style="cursor: pointer; color: red; font-weight: bold;">下载浏览器点我</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="../../views/speed-mode-tutorial.html" target="_blank" style="cursor: pointer; color: red; font-weight: bold;">不会切换到极速模式点我</a>'var handleClickClose = function (event) {document.body.removeChild(tip)}var startAppend = function () {document.body.appendChild(tip)tip.appendChild(closeBtn)}closeBtn.style.position = 'absolute'closeBtn.style.right = '20px'closeBtn.style.bottom = '7px'closeBtn.style.cursor = 'pointer'closeBtn.style.width = '15px'closeBtn.style.height = '15px'closeBtn.src = '../assets/images/icon-close.png'closeBtn.alt = '关闭'if (closeBtn.addEventListener) {closeBtn.addEventListener('click', handleClickClose)} else {// IE8 及以下closeBtn.attachEvent('onclick', handleClickClose)}tip.style.position = 'relative'tip.style.backgroundColor = 'yellow'tip.style.color = 'red'tip.style.position = 'fixed'tip.style.top = 0tip.style.right = 0tip.style.left = 0tip.style.padding = '5px 20px'tip.style.fontSize = '14px'if (sys.ie) {browser = "IE";tip.innerHTML = contentHTML + endHTMLstartAppend()}if (sys.firefox) {browser = "Firefox";tip.innerHTML = contentHTML + endHTMLstartAppend()}if (sys.chrome) {browser = "Chrome";var getChromeVersion = function () {var arr = navigator.userAgent.split(' ');var chromeVersion = '';for (var i = 0; i < arr.length; i++) {if (/chrome/i.test(arr[i]))chromeVersion = arr[i]}if (chromeVersion) {return Number(chromeVersion.split('/')[1].split('.')[0]);} else {return false;}}if (getChromeVersion()) {var version = getChromeVersion();// 如果 360 极速浏览器并切换到极速模式低于86版本if (version < 86) {tip.innerHTML = '您当前使用的浏览器版本过低，使用可能会出现界面显示异常或功能无法正常使用等问题，建议下载使用最新的 360 极速浏览器并切换到极速模式。' + endHTMLstartAppend()}}}if (sys.opera) {browser = "Opera";tip.innerHTML = contentHTML + endHTMLstartAppend()}if (sys.safari) {browser = "Safari";}
})()
</script>

JS判断不同的浏览器和版本，提示浏览器版本过低，兼容IE8到IE11相关推荐

js判断是微信、QQ内置浏览器打开页面
var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger" ...
js判断当前设备及获取设备、浏览器的宽度和高度
在开发的时候,我们常常需要根据用户当前设备进行相应设置和显示,在此展示一个简单的方法判断(这个方法忘了是从哪里看来了的~),希望对你有帮助哦~ /*** 判断当前设备* @returns*/ func ...
js判断当前设备和获取设备、浏览器宽高
/*** 判断当前设备* @returns*/ function currDevice(){//设备信息var u = navigator.userAgent;// appVersion 可返回浏览器 ...
js判断H5页面处于app环境还是浏览器环境
我们对比app环境和浏览器环境的navigator.userAgent,可以发现它们几乎一致,并不能通过它来区分. 解决方案: 由于在app内部要传参数给安卓和ios,app定义了相应的方法来接收数据 ...
移动端js判断iPhone浏览器还是Android浏览器
js判断函数: //检测是Android的浏览器还是 iPhone的浏览器function checkNavigator () {var u = navigator.userAgent;var an ...
关于搜狗浏览器和360安全浏览器的兼容模式
在处理浏览器兼容问题时,最让我头疼的是搜狗浏览器和360安全浏览器的兼容模式.有时表现为IE7内核,有时又表现为系统IE内核.上网搜了一下资料研究了一番.只是个人的小小研究,如有错误欢迎各路大神指教. ...
js/jQuery判断浏览器名称、内核版本、浏览器壳
1.js方法/* 判断浏览器名称和版本目前只能判断:ie/firefox/chrome/opera/safari 2012年5月16日23:47:08 浏览器内核UA:UA; 浏览器内核名称:NV. ...
js判断是否是ie浏览器且给出ie版本
之前懒得写判断ie版本js,因为网上关于这方面的代码太多了,所以从网上拷贝了一个,放到项目上才发现由于时效性的问题,代码不生效.就自己写一个吧. 怎么去看浏览器的内核等信息 ---- js的全局对象w ...
js判断客户浏览器类型，版本
在JS中判断浏览器的类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常需要根据不同 ...
JS判断浏览器类型与版本
这个东西在跨平台前端开发很有用: 在JS中判断浏览器的类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却 ...

JS判断不同的浏览器和版本，提示浏览器版本过低，兼容IE8到IE11

产品需求

需求由来

实现效果

源码

JS判断不同的浏览器和版本，提示浏览器版本过低，兼容IE8到IE11相关推荐

最新文章

热门文章