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

news/2024/12/11 20:49:46/

产品需求

页面顶部提示用户下载并使用 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>

http://www.ppmy.cn/news/488490.html

相关文章

安全浏览器版本过低?该升级浏览器内核了

在网络时代&#xff0c;浏览器是一个重要的应用软件。我们在使用浏览器的时候&#xff0c;或多或少都会有一些问题。小编今天主要和大家谈一下浏览器版本过低&#xff0c;打不开网页页面的问题。其实我们都知道浏览器是有内核的&#xff0c;那么内核是什么&#xff0c;小编也在…

计算机版本低怎么升级,电脑ie浏览器版本过低怎么升级(浏览器版本过低升级步骤)...

在访问一些网站时&#xff0c;提示“你的ie浏览器版本过低&#xff0c;建议使用较高版本ie访问或使用firefox&#xff0c;chrome等浏览器访问”。对于这样的电脑新手来说&#xff0c;当然不知道是什么情况&#xff0c;更不知道如何查看ie版本。 之所以会提示升级IE版本&#xf…

知乎提示浏览器版本过低的完美解决办法

当你打开知乎网页&#xff0c;却看到“你正在使用的浏览器版本过低&#xff0c;将不能正常浏览和使用知乎。”提示&#xff08;如下图所示&#xff09;&#xff0c;这说明你是时候升级浏览器了&#xff01; 科技发展日新月异&#xff0c;网页技术也是如此&#xff0c;随着技术的…

当浏览器版本过低时提示升级浏览器

当浏览器版本过低时提示升级浏览器 一段代码轻松搞定 当浏览器版本过低时提示升级浏览器&#xff0c;不显示原来页面内容 <!--[if lt IE 8]><script type"text/javascript">document.write("<div styleposition: fixed; top: 0; left: 0; righ…

浏览器版本过低

http://study.163.com/common/errors/notSupported.htm <div class"wb f-cb"> <a href"http://www.google.cn/intl/zh-CN/chrome/browser/" class"g f-hide" target"_blank">谷歌浏览器</a> <a href"http:/…

edge浏览器 您的flash可能被禁用或者版本过低

转自&#xff1a;http://blog.sina.com.cn/s/blog_540316260102xkp1.html 从Win 8开始&#xff0c;微软的Windows操作系统就已经将Flash Player内嵌。故对于Win 10系统使用微软默认的Edge浏览器&#xff0c;或者使用IE11浏览器&#xff0c;通常情况下都可以正常在优酷、YouTube…

关于Chrome浏览器升级到80版本后受影响的场景以及解决方案

文章目录 背景cas为啥会受影响&#xff1f;受影响的场景解决方案方案一 手动设置方案二 版本回退方案三 &#xff08;非同域应用&#xff09;方案四&#xff08;同域应用&#xff09; 资料引用&#xff1a; 背景 今天子涵先生&#xff0c;收到小伙伴反馈说80版本的chrome浏览器…

判断浏览器是否低于指定版本号,若低于,则提示浏览器版本过低,更新浏览器页面...

(function(window) {var theUA window.navigator.userAgent.toLowerCase();if ((theUA.match(/msie\s\d/) && theUA.match(/msie\s\d/)[0]) || (theUA.match(/trident\s?\d/) && theUA.match(/trident\s?\d/)[0])) {var ieVersion theUA.match(/msie\s\d/)…