浏览器版本过低提示升级

987 阅读2分钟

1、项目需要做浏览器兼容的问题要处理,所以做个笔记。

因为开发的都是用谷歌的多,IE浏览器基本弃用了。但是有些项目使用者用的是IE的,以前没有关注这个问题,现在要做这个的处理。IE10以及IE10一下的不兼容es6,这个是比较麻烦的。其他的还好处理一点。

1、首先是判断浏览器的版本

代码如下:

        function getBroswerAndVersion() {
		var os = navigator.platform;
		var userAgent = navigator.userAgent;
		var info = "";
		var tempArray = "";
		//判断浏览器版本
		var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
		var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
		var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; //判断是否IE的Edge浏览器
		var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);

		if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {
			tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent);
			info += tempArray[1] + tempArray[2];
		} else if (isIE) {

			var version = "";
			var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
			reIE.test(userAgent);
			var fIEVersion = parseFloat(RegExp["$1"]);
			if (fIEVersion == 7) {
				version = "IE7";
			} else if (fIEVersion == 8) {
				version = "IE8";
			} else if (fIEVersion == 9) {
				version = "IE9";
			} else if (fIEVersion == 10) {
				version = "IE10";
			} else {
				version = "0"
			}

			info += version;

		} else if (isEdge) {
			info += "Edge";
		} else if (isIE11) {
			info += "IE11";
		} else if (/[Cc]hrome\/\d+/.test(userAgent)) {
			tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent);
			if (tempArray[2] < 57) {
				alert('您使用的谷歌浏览器版本过低,为了更好地体验请将浏览器升级到最新版本!');
			}
			info += tempArray[1] + tempArray[2];
		} else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
			tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent);
			info += tempArray[3] + tempArray[1];
		} else if (/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)) {
			tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent);
			info += tempArray[1] + tempArray[2];
		} else {
			info += "unknown";
		}
		return info;
	}
	var ven = getBroswerAndVersion();
	if (ven === 'IE7' || ven === 'IE8' || ven === 'IE9' || ven === 'IE10') {
		confirm('检测到您使用的是' + ven + '浏览器,为安全性考虑,请使用最新版谷歌、欧朋、火狐浏览器打开', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
	}

另外补充一下,关于es6兼容的处理(我懒直接复制别人的代码过来)

一、使浏览器兼容ES6基本语法

1、在引入其他脚本前先引入browser.min.js。(官网有下载的),要么就是直接在界面上引用

<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2、script标签的type的值设为text/babel。

        <script type="text/babel">
            var html =`<ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>`
            console.log('解决IE不兼容es6');
            console.log(document.getElementById('bigBox'));

            document.getElementById('bigBox').innerHTML = html
            new Promise(function(resolve,reject) {
            var flag = 1;
                if(flag){
                    resolve(flag);
                }
                }).then(function (data) {
                    console.log(data);
                })
        </script>

————————————————

IE浏览器对于ES6的使用一定要放在 script标签的type的值设为text/babel 里面,不然不识别,老是报错。

注:因为使用的es6的语法比较散,就像箭头函数、let、Promise等。所以感觉还是简单粗暴的提示用户升级浏览器好了(因为我接手的这个项目已经开发的差不多了,只是后期的维护和优化,界面很多,代码也有点乱)。

vue的就百度吧!很多答案的