缘起

有时候我们有需求是希望用户访问系统时对用户的浏览器类型进行限制，以便用户获得更好的使用体验，比如你开发的系统在chrome下兼容最为完善，你可能不希望用户使用其他的浏览器来访问你的系统。比如如下这个效果

那么这个效果是怎么做的呢？

实现思路

用户首次进入页面时，对用户的浏览器进行检测，判断如果不是你需要的浏览器，则显示对应的界面，否则正常使用。

关键代码-页面

<div class="dbw-internet-tips"><div class="dbw-tips-title"><img src="assets/img/nodata.png" alt=""></div><div class="dbw-tips-con">为了能给您更好的体验，请使用<span class="dbw-tips-chrome">谷歌浏览器</span>查看</div><div class="dbw-tips-download">没有安装谷歌浏览器？<span class="dbw-btn-download">点击下载</span></div>
</div>

关键代码-JS

$(function () {// 判断是否为chome，如果不是则提示使用chrome或者下载chromeischrome();//判断浏览器是否为edge浏览器，如果是则显示提示getBrowser();
}// 判断是否为chome，如果不是则提示使用chrome或者下载chrome
function ischrome() {var isChrome = navigator.userAgent.toLowerCase();if (!isChrome.match(/chrome/)) {nochrome();} else {var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");function _mime(option, value) {var mimeTypes = navigator.mimeTypes;for (var mt in mimeTypes) {if (mimeTypes[mt][option] == value) {return true;}}return false;}// 判断你是否是360浏览器if(is360){nochrome();}// 是否为Edge浏览器
/*        else if(navigator.userAgent.indexOf("Microsoft Edge")) {nochrome();}*/else{yeschrome();}}
}// 判断浏览器是否为edge浏览器，如果是则显示提示
function getBrowser(getVersion) {var ua_str = navigator.userAgent.toLowerCase(), ie_Tridents, trident, match_str, ie_aer_rv, browser_chi_Type;if("ActiveXObject" in self){ie_aer_rv= (match_str = ua_str.match(/msie ([\d.]+)/)) ?match_str[1] :(match_str = ua_str.match(/rv:([\d.]+)/)) ?match_str[1] : 0;ie_Tridents = {"trident/7.0": 11, "trident/6.0": 10, "trident/5.0": 9, "trident/4.0": 8};trident = (match_str = ua_str.match(/(trident\/[\d.]+|edge\/[\d.]+)/)) ?match_str[1] : undefined;browser_chi_Type = (ie_Tridents[trident] || ie_aer_rv) > 0 ? "ie" : undefined;}else{browser_chi_Type = (match_str = ua_str.match(/edge\/([\d.]+)/)) ? "edge" :(match_str = ua_str.match(/firefox\/([\d.]+)/)) ? "firefox" :(match_str = ua_str.match(/chrome\/([\d.]+)/)) ? "chrome" :(match_str = ua_str.match(/opera.([\d.]+)/)) ? "opera" :(match_str = ua_str.match(/version\/([\d.]+).*safari/)) ? "safari" : undefined;}var verNum, verStr;verNum = trident && ie_Tridents[trident] ? ie_Tridents[trident] : match_str[1];verStr = (getVersion != undefined) ? browser_chi_Type+"/"+verNum : browser_chi_Type;console.log(verStr);if(verStr == 'edge') {nochrome();}}// 显示浏览器版本提示
function nochrome() {var bodys = $('body');bodys.find('.dbw-login-container').remove();bodys.css('background','none');$('.dbw-internet-tips').show();$('.dbw-btn-download').click(function() {location.href='root/googlechromexp_49.0.2623.112.exe';});
}
// 隐藏浏览器版本提示
function yeschrome() {$('.dbw-internet-tips').hide();
}

关于下载功能

上门有下载的代码，我们只需要在对应的目录下放置要下载的文件即可

 location.href='root/googlechromexp_49.0.2623.112.exe';

如何实现web系统检测浏览器类型的功能相关推荐

如何用js检测浏览器类型
这个需求在前端开发当中是很常见的,大家都知道我们写的js或css在浏览器中是有兼容问题的,当下虽然大家可能不用感受的IE6带来的痛苦(别问我为什么是痛苦),但是你负责的项目本身就是政府.医院之类的项目 ...
javascript检测浏览器类型和版本号（兼容各浏览器）
代码 1 from: http://www.webreference.com/tools/browser/javascript.html 2 http://browserspy.dk/browse ...
js检测浏览器类型以及版本信息
js检测浏览器类型以及版本信息 DetectBrowser () {const userAgent = window.navigator.userAgentconst isChrome = userA ...
php代码用浏览器怎么看,php 如何检测浏览器类型的代码
php检测浏览器类型代码 // Simple browser detection $is_lynx = $is_gecko = $is_winIE = $is_macIE = $is_opera = ...
通过jsp获取客户端的IP以及通过js检测浏览器类型
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的. 但是在通过了 Apache,Squid等反向代理软件就不能获取到客户端的真 ...
jquery检测浏览器类型
使用jquery如下代码检测浏览器版本时:出问题,在检测IE浏览器,如果版本是IE11时,会出现 $.browser.msie的返回值是false,$.browser.mozilla的返回值是true ...
web系统ie浏览器不刷新数据
最近系统在适配ie浏览器(win10系统ie11浏览器),发现一个问题,当数据库信息有更新的时候,浏览器前台往往刷新不出来,我换成谷歌浏览器就没有这个问题,我在js函数debugger了一下,发现aj ...
jquery1.9 下检测浏览器类型和版本
原文链接:http://blog.csdn.net/lyc_2011_acm/article/details/8749177 Jquery1.9版本中$.browser已被剔除: 判断浏览器类型: $ ...
jquery1.9 下检测浏览器类型和版本的方法
Jquery1.9版本中$.browser已被剔除: 判断浏览器类型: 复制代码代码如下: $.browser.mozilla = /firefox/.test(navigator.userAgen ...

如何实现web系统检测浏览器类型的功能

缘起

实现思路

关键代码-页面

关键代码-JS

关于下载功能

如何实现web系统检测浏览器类型的功能相关推荐

最新文章

热门文章