通过JS判断浏览器类型,并区分IE各版本浏览器,以及部分IE兼容整理

判断浏览器类型
/**
 * 检验浏览器类型
 */
function checkBrowser() {
	var Sys = {};
	var ua = navigator.userAgent.toLowerCase();
	var s;
	(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1]:
		(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
		(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(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
	if(Sys.ie) return "ie";
	if(Sys.firefox) return "firefox";
	if(Sys.chrome) return "chrome";
	if(Sys.opera) return "opera";
	if(Sys.safari) return "safari";
}

检测IE浏览器版本信息
/**
 * 获取IE的版本
 */
function IEVersion() {
	//取得浏览器的userAgent字符串  
	var userAgent = navigator.userAgent; 
	 //判断是否IE<11浏览器  
	var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
	//判断是否IE的Edge浏览器  
	var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; 
	var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
	if(isIE) {
		var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
		reIE.test(userAgent);
		var fIEVersion = parseFloat(RegExp["$1"]);
		if(fIEVersion == 7) {
			return 7;
		} else if(fIEVersion == 8) {
			return 8;
		} else if(fIEVersion == 9) {
			return 9;
		} else if(fIEVersion == 10) {
			return 10;
		} else {
			//IE版本<=7
			return 6; 
		}
	} else if(isEdge) {
		//edge
		return 'edge'; 
	} else if(isIE11) {
		//IE11  
		return 11; 
	}
}

IE浏览器兼容部分问题整理(后期如果遇到会及时更新)

IE --- 前端开发的恶梦


  • IE浏览器 初始化时间对象 的问题处理

PS:在JS 开发中 一般会遇到各种对象的初始化,然而在IE中初始化 时间(Date)对象时,又开始各种作怪!

如:new Date("2018-01-01 00:00:00"); ------ 输出结果为 ------> NaN (你敢相信吗?)

处理方式为: 在初始化时间前,先对 “-” 进行替换处理,替换为 "/"

如:2018-01-01 00:00:00 需 替换为 2018/01/01 00:00:00 才能初始化

为了节约成本,干脆重新构造时间对象初识方法
如:

/**
 * Date 方法重载,时间 new Date(String) 兼容所有浏览器
 * @param {Object} dateString
 */
var newDate = function(dateString) {
	if(checkBrowser() == "ie") {
		if(typeof dateString == "string") {
			if(dateString.toString().indexOf("-") > -1) {
				dateString = dateString.replace(/-/g, "/");
			}
		}
	}
	if (dateString == undefined || dateString == null || dateString == "") {
		return new Date();
	} else{
		return new Date(dateString);
	}
};

初始化时间时统一使用  new newDate("2018-01-01 00:00:00") 形式


如果浏览器是IE浏览器,并且版本为 IE8、IE9时,需进行如下配置 才能实现 前后端分离时的跨域(ajax请求)问题

1、检验用户是否设置IE允许访问跨域资源
//只在IE10以下才出现跨域无法访问问题
if (IEVersion()  < 10) {
	try {
		var WshShell = new ActiveXObject("WScript.Shell");
		//读取系统注册表中是否允许 IE通过域访问数据源 3=禁用、0=启用、1=提示
		if (WshShell.RegRead("HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1406") != 0) {
			// 这种情况有两种
			// *****************方式1、提示用户,叫用户去设置******************************************
			layer.confirm('当前浏览器尚不支持跨域访问资源,请问是否去设置访问?', {
				btn: ['是', '否']//按钮
			}, function () {
				//设置允许 IE通过域访问数据源页面
				//设置 功能控件的教程 (https://blog.csdn.net/qq_26848943/article/details/89329223)
				window.location.href = "view/IE-Page/ie-9.html#jsonP"
			}, function () {
				layer.alert("必须设置后才能访问跨域的资源哦!");
			});
			
			// *****************方式12、提示用户,询问用户是否系统帮他设置 ******************************************
			layer.confirm('当前浏览器尚不支持跨域访问资源,请问是否去设置访问?', {
				btn: ['是', '否']//按钮
			}, function () {
				//设置允许 IE通过域访问数据源页面
				//(设置Windows 系统注册表方式:https://blog.csdn.net/bjash/article/details/8261835)
				WshShell.RegWrite("HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Internet Settings\\Zones\\3\\1406","0","REG_DWORD");
			}, function () {
				layer.alert("必须设置后才能访问跨域的资源哦!");
			});
		}
	} catch (e) {
		// 浏览器中 没有启用 对 activex对象初始化的支持
		layer.confirm('当前浏览器访问需要设置一些功能控件,请问是否去设置访问?', {
				btn: ['是', '否']//按钮
		}, function () {
			//设置 功能控件的教程 (https://blog.csdn.net/qq_26848943/article/details/89329223)
			window.location.href = "view/IE-Page/ie-9.html"
		}, function () {
			layer.alert("必须设置后才能访问跨域的资源哦!");
		});
	}
}

以上的参考链接分别在如下的表格中:

功能链接地址
设置功能控件地址https://blog.csdn.net/qq_26848943/article/details/89329223
通过ActiveX控件读写系统注册表参考https://blog.csdn.net/bjash/article/details/8261835
2、对ajax请求设置全局的属性(相对于IE10以下版本)
if(IEVersion() < 10) {
	$.ajaxSetup({
		//解决jquery ajax在跨域访问post请求的时候,ie9以下无效(包括ie9)的问题
		crossDomain: true == !(document.all),
	});
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值