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{    // 创建置灰内容 非IEvar 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

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

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

移动端h5页面不同尺寸屏幕适配兼容方法
最近刚开始做移动端页面,遇到了不少bug,说一下解决移动端不同屏幕页面的适应问题. 1. viewport属性及html页面结构 <meta name="viewport" ...
用vue实现H5页面托拽的div(兼容pc与移动端)
首先看效果图 PC端移动端首先实现拖拽需要知道三个事件,按下,移动和抬起 PC端鼠标按下事件:onmousedown鼠标移动事件:onmousemove鼠标抬起事件:onmouseup 移动端 ...
uniapp开发的android项目,页面置灰
因为uniapp在app的开发的时候有逻辑层和视图层的区分,所有在逻辑层里无法直接操作dom节点, 所有引入renderjs 首先在页面标签里添加对renderjs的调用在逻辑层的 data里定义变 ...
页面置灰filter: grayscale(1)
filter: grayscale(1);取值0-1 在根目录html下面直接设置
html页面在ie上不兼容,四招解决IE 11浏览器网页不兼容问题
虽然Windows 10即将发布,而Edge浏览器也将成为该系统的默认浏览器,但截止目前,IE 11的用户数量已经超越IE 10和IE 9的总和.虽然IE 11已经大大改进了性能,但是在浏览一些网站的 ...
全局置灰操作：小程序置灰、app置灰、H5置灰
微信小程序全局置灰: 只需要在app.wsxx文件中添加一行代码: page {filter: grayscale(100%);} 也可以写到对应的页面中,xxx.wsxx 文件中添加:page {f ...
前端实现页面变灰功能(含 Flutter )
前端利用css3中新增的filter属性实现页面变灰功能.一键全局修改样式,加滤镜.加曝光等等.flutter 使用 ColorFiltered 包裹我们的根widget 实现页面变灰. 今天从前端 ...
html5 页面回退,一种基于浏览器堆栈管理的H5页面动态回退方法与流程
本技术应用于在浏览器运行的H5应用中,涉及浏览器的History历史堆栈管理技术,尤其是移动端H5应用在浏览器中的History历史堆栈管理技术. 背景技术: 移动端H5应用作为一款基于浏览器历史堆栈 ...
说说filter这个css属性（网站置灰实现）
在2020年4月4日这一天,大家无论打开手机.电脑网页还是APP,都可以看到所有的内容都已经变成了灰色,大家可能还会误以为是网站统一换了一套css样式,不过后面转念一想这么多网站及页面,如果要统一换样 ...

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

h5页面置灰处理源代码

兼容IE（优雅降级提供下载浏览器链接）

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

最新文章

热门文章