h5页面置灰处理源代码，兼容IE（优雅降级提供下载浏览器链接）

Ebony ·

更新时间:2024-11-10

· 561 次阅读

h5页面置灰处理源代码 兼容IE（优雅降级提供下载浏览器链接）

马上要到清明节了，有朋友找我要给页面置灰的方案和方法，在网上搜的方法基本都是在Chrome上直接置灰，在ie上就有点难处理了；我找了下之前在南京遇到公祭日时候，做过类似的操作，为了方便当时用原生js写了一个，这样的好处是不依赖jq之类的，需要时候引入不需要时候废弃就行。

对与IE的兼容，我们做的是优雅降级，在IE的时候提示让用户去下载chrome浏览器或者360极速版（也是chrome的内核），然后下边就直接放代码啦。


/** 公祭日应用js ============== Start */
;(function(){
	sacrificialGrayIESiteFun();
})();
/**
 * ie置灰降级处理
 */
function sacrificialGrayIESiteFun()
{
	var thisBowerName = getExploreBrowseFun().name;
	if(thisBowerName === 'IE')
	{	
		var bowerVersion = (getExploreBrowseFun().version).split('.')[0]-0;	
		document.documentElement.setAttribute("style", 'width: 100%;height: 100%;overflow: hidden;text-align: left;');
		document.body.setAttribute("style", 'width: 100%;height: 100%;overflow: hidden; text-align: left;');
		// 内容
		var sacrificialCoverDiv = document.createElement('div');
			sacrificialCoverDiv.setAttribute("style",'width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999999999;background-color: rgba(0,0,0,.8);background-color: rgb(0,0,0)\\9; filter: alpha(Opacity=80)\\9;');		
		var sacrificialMain01 = '今天为公祭日,此网站不支持IE浏览器打开;
';
		var textDecorationU = 'underline';
		var textDecorationN = 'none';
		var Bower01 = '360';
		var Bower02 = 'firefox';
		var sacrificialMain02 = '如果没其他浏览器请下载 360浏览器 或 火狐浏览器 ,windows10用户也可用自带的Edge浏览器打开网站为: '+(window.location.protocol +"//"+ window.location.host+window.location.pathname )+'';		
		var sacrificialMainDiv = document.createElement('div');
			sacrificialMainDiv.setAttribute("style", 'width: 100%;position: absolute;top: 15%;text-align: center;z-index: 9999999999;');
			sacrificialMainDiv.innerHTML = sacrificialMain01+sacrificialMain02;
		if(bowerVersion <= 7)
		{
			document.body.innerHTML = sacrificialMain01+sacrificialMain02;;
		}
		else
		{			
			document.body.appendChild(sacrificialCoverDiv);
			document.body.appendChild(sacrificialMainDiv);
		}
	}
	else
	{	
		// 创建置灰内容 非IE
		var GrayStyle = '';
		GrayStyle =	'html {'+
						'filter: grayscale(100%);'+
						'-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url(desaturate.svg))\9;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)\9;-webkit-filter: grayscale(1); '+
					'}';
		var eleDome = document.createElement("style");
		eleDome.type = 'text/css';
		eleDome.innerHTML = GrayStyle;
		document.getElementsByTagName('head')[0].appendChild(eleDome);
	}
}
/**
 * 判断浏览器版本
 */
function getExploreBrowseFun()
{
	var sys = {},
    ua = navigator.userAgent.toLowerCase(),
    s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
    (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
    (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
    (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
    (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
    (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
    (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
    // 根据关系进行判断
    if (sys.ie) return ({ 'name': 'IE','version': sys.ie});
    if (sys.edge) return ({ 'name': 'EDGE','version': sys.edge});
    if (sys.firefox) return ({ 'name': 'Firefox','version': sys.firefox});
    if (sys.chrome) return ({ 'name': 'Chrome','version': sys.chrome});
    if (sys.opera) return ({ 'name': 'Opera','version': sys.opera});
    if (sys.safari) return ({ 'name': 'Safari','version': sys.safari});
    return 'Unkonwn';
}
/** 公祭日应用js ============== End */

最后边的方法是判断浏览器内核的，本篇文章先这样后期再做其他修改，最后更新时间：2020-04-03

如果本篇对你有用，可以点个赞

作者：jason_renyu

浏览器 h5页面源代码 ie

1024 个赞