检测浏览器版本提示升级js插件

badbrowser.js是一款能够检测浏览器版本并提示升级浏览器的js插件。badbrowser.js可以根据配置信息，当用户的浏览器不满足配置需求时，提示用户升级他们的浏览器。

安装

可以通过npm来安装badbrowser.js插件。

npm i @dvhb/badbrowser                  
                

使用方法

在页面中引入badbrowser.css和badbrowser.js文件。

<link rel="stylesheet" type="text/css" href="css/badbrowser.css">
<script src="js/badbrowser.js"></script>
                

HTML结构

你可以自定义弹出的升级浏览器对话框的内容，HTML代码如下：

<h1>你使用的浏览器已经过时！</h1>
<h3 class="badbrowser-user-browser"></h3>
<p>您可以继续浏览器本网站，但是不保证能够正确执行所有的功能。</p>
<p>你可以根据下面的链接来升级您的浏览器</p>
<p>
    <a class="oldbrowser__browserLink" title="Download Google Chrome" style="background-position: 0px 0px;"
       href="https://www.google.com/chrome/" target="_blank"></a>
    <a class="oldbrowser__browserLink" title="Download Mozilla Firefox" style="background-position: -60px 0px;"
       href="https://www.mozilla.org/ru/firefox/new/" target="_blank"></a>
    <a class="oldbrowser__browserLink" title="Download Opera" style="background-position: -120px 0px;"
       href="http://www.opera.com/download" target="_blank"></a>
    <a class="oldbrowser__browserLink" title="Download Safari" style="background-position: -180px 0px;"
       href="https://www.apple.com/safari/" target="_blank"></a>
    <a class="oldbrowser__browserLink" title="Download Internet Explorer" style="background-position: -240px 0px;"
       href="https://www.microsoft.com/ie/" target="_blank"></a>
</p>
<a href="javascript:;" class="badbrowser-close">关闭</a>
                

初始化插件

通过下面的js代码来初始化badbrowser插件。

badbrowser.init({
  // path to your html alerts
  // could be a function:
  // function (ua) {
  //   return '/alerts/' + lang + '.html'
  // },
  path: '/alerts/en.html',

  // if `false` then user's choice will be saved in the cookies
  // and alert window will not be showen next time
  ignoreChoice: false,

  // Min version of browser that will be supported
  supported: {
    // user of chrome v.39 will see an alert winodw
    chrome: 42,
    firefox: 38,
    msie: 9,
    opera: 26,
    android: 10,
    safari: 6,
    // if `false`, will show alert for any mobile browser
    mobile: false
  }
  
})                
                

更多关于badbrowser.js浏览器检测插件的github地址为：https://github.com/dvhbru/badbrowser

相关插件

js和CSS3炫酷毛玻璃面板特效

炫酷js和CSS3鼠标跟随图片序列动画特效

jQuery滚动固定侧边栏元素插件Sticksy.js

js多边形渐变网格背景插件