h5頁面置灰處理源代碼，兼容IE（優雅降級提供下載瀏覽器鏈接）

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 = '<h2 style="color: #f40;font-size: 24px;line-height: 36px;text-align:center;" >今天爲公祭日,此網站不支持IE瀏覽器打開;<br></h2>';
		var textDecorationU = 'underline';
		var textDecorationN = 'none';
		var Bower01 = '360';
		var Bower02 = 'firefox';
		var sacrificialMain02 = '<p style="color: #999;text-align:center;" >如果沒其他瀏覽器請下載 <span style="color: #ccc;cursor: pointer;" οnmοuseenter="this.style.textDecoration = \''+textDecorationU+'\';" οnmοuseleave="this.style.textDecoration = \''+textDecorationN+'\';" οnclick="window.open(\'http://chrome.360.cn/\');" >360瀏覽器</span> 或 <span style="color: #ccc;cursor: pointer;" οnmοuseenter="this.style.textDecoration = \''+textDecorationU+'\';" οnmοuseleave="this.style.textDecoration = \''+textDecorationN+'\';"  οnclick="window.open(\'http://www.firefox.com.cn/download/\');" >火狐瀏覽器</span> ,windows10用戶也可用自帶的Edge瀏覽器打開網站爲: <em>'+(window.location.protocol +"//"+ window.location.host+window.location.pathname )+'</em></p>';		
		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

如果本篇對你有用，可以點個贊