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
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/jquery-tools/201709044720.html
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!