默哀日网站置灰,支持IE浏览器h5
前端有很多方法可以将网站设置成完全灰色,可以通过调CSS样式,可以加滤镜,可以通过js控制样式等。然而,对不那么熟悉前端的后台开发或维护人员,只能从网上找办法,东拼西凑。尝试很多次,最麻烦的是IE浏览器网页死活不变灰色。下面以我解决过的一个生产问题为例,彻底解决了手工替换彩色图标、图片的尴尬且耗时的问题,支持IE浏览器。
在html中引入css样式(不支持IE显示置灰)
对于一开始没有考虑到默哀日置灰的网站,只要在每个h5网页代码中引入css样式,或者在已经引入到所有网页的公共css里面修改代码也可以。我是新建了一个css文件turngray.css,代码如下:
html{filter: gray !important;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
}
说明:除了IE浏览器,我试过,这段代码对360安全浏览器、谷歌浏览器、火狐浏览器等大多数浏览器都起作用。按F12,可以看到实际起作用的是 -webkit-filter: grayscale(100%);这行代码。
接下来是在需要变灰的网页代码文件中引入css
<link rel="stylesheet" type="text/css" href="../assets/css/turngray.css" />
(相对路径根据实际项目目录来定,此处仅仅举例)
在html引入js(支持IE)
主要是解决IE浏览器中页面死活不变灰的情况。我在网上找到grayscale.js。代码如下:
/** -- grayscale.js --* Copyright (C) James Padolsey (http://cn.baiwanzhan.com)**/var grayscale = (function(){var config = {colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],externalImageHandler : {/* Grayscaling externally hosted images does not work- Use these functions to handle those images as you so desire *//* Out of convenience these functions are also used for browserslike Chrome that do not support CanvasContext.getImageData */init : function(el, src) {if (el.nodeName.toLowerCase() === 'img') {// Is IMG element...} else {// Is background-image element:// Default - remove background imagesdata(el).backgroundImageSRC = src;el.style.backgroundImage = '';}},reset : function(el) {if (el.nodeName.toLowerCase() === 'img') {// Is IMG element...} else {// Is background-image element:el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';}}}},log = function(){try { window.console.log.apply(console, arguments); }catch(e) {};},isExternal = function(url) {// Checks whether URL is external: 'CanvasContext.getImageData'// only works if the image is on the current domain.return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);},data = (function(){var cache = [0],expando = 'data' + (+new Date());return function(elem) {var cacheIndex = elem[expando],nextCacheIndex = cache.length;if(!cacheIndex) {cacheIndex = elem[expando] = nextCacheIndex;cache[cacheIndex] = {};}return cache[cacheIndex];};})(),desatIMG = function(img, prepare, realEl) {// realEl is only set when img is temp (for BG images)var canvas = document.createElement('canvas'),context = canvas.getContext('2d'),height = img.naturalHeight || img.offsetHeight || img.height,width = img.naturalWidth || img.offsetWidth || img.width,imgData;canvas.height = height;canvas.width = width;context.drawImage(img, 0, 0);try {imgData = context.getImageData(0, 0, width, height);} catch(e) {}if (prepare) {desatIMG.preparing = true;// Slowly recurse through pixels for prep,// :: only occurs on grayscale.prepare()var y = 0;(function(){if (!desatIMG.preparing) { return; }if (y === height) {// Finished!context.putImageData(imgData, 0, 0, 0, 0, width, height);realEl ? (data(realEl).BGdataURL = canvas.toDataURL()): (data(img).dataURL = canvas.toDataURL())}for (var x = 0; x < width; x++) {var i = (y * width + x) * 4;// Apply Monoschrome level across all channels:imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);}y++;setTimeout(arguments.callee, 0);})();return;} else {// If desatIMG was called without 'prepare' flag// then cancel recursion and proceed with force! (below)desatIMG.preparing = false;}for (var y = 0; y < height; y++) {for (var x = 0; x < width; x++) {var i = (y * width + x) * 4;// Apply Monoschrome level across all channels:imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);}}context.putImageData(imgData, 0, 0, 0, 0, width, height);return canvas;},getStyle = function(el, prop) {var style = document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(el, null)[prop]: el.currentStyle[prop];// If format is #FFFFFF: (convert to RGB)if (style && /^#[A-F0-9]/i.test(style)) {var hex = style.match(/[A-F0-9]{2}/ig);style = 'rgb(' + parseInt(hex[0], 16) + ','+ parseInt(hex[1], 16) + ','+ parseInt(hex[2], 16) + ')';}return style;},RGBtoGRAYSCALE = function(r,g,b) {// Returns single monochrome figure:return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );},getAllNodes = function(context) {var all = Array.prototype.slice.call(context.getElementsByTagName('*'));all.unshift(context);return all;};var init = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.call(this, allContexts[cIndex]); }return;}context = context || document.documentElement;if (!document.createElement('canvas').getContext) {context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';context.style.zoom = 1;return;}var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (cur.nodeName.toLowerCase() === 'img') {var src = cur.getAttribute('src');if(!src) { continue; }if (isExternal(src)) {config.externalImageHandler.init(cur, src);} else {data(cur).realSRC = src;try {// Within try statement just encase there's no support....cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();} catch(e) { config.externalImageHandler.init(cur, src); }}} else {for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {var prop = config.colorProps[pIndex],style = getStyle(cur, prop);if (!style) {continue;}if (cur.style[prop]) {data(cur)[prop] = style;}// RGB color:if (style.substring(0,4) === 'rgb(') {var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';continue;}// Background Image:if (style.indexOf('url(') > -1) {var urlPatt = /\(['"]?(.+?)['"]?\)/,url = style.match(urlPatt)[1];if (isExternal(url)) {config.externalImageHandler.init(cur, url);data(cur).externalBG = true;continue;}// data(cur).BGdataURL refers to caches URL (from preparation)try {var imgSRC = data(cur).BGdataURL || (function(){var temp = document.createElement('img');temp.src = url;return desatIMG(temp).toDataURL();})();cur.style[prop] = style.replace(urlPatt, function(_, url){return '(' + imgSRC + ')';});} catch(e) { config.externalImageHandler.init(cur, url); }}}}}};init.reset = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.reset.call(this, allContexts[cIndex]); }return;}context = context || document.documentElement;if (!document.createElement('canvas').getContext) {context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';return;}var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (cur.nodeName.toLowerCase() === 'img') {var src = cur.getAttribute('src');if (isExternal(src)) {config.externalImageHandler.reset(cur, src);}cur.src = data(cur).realSRC || src;} else {for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {if (data(cur).externalBG) {config.externalImageHandler.reset(cur);}var prop = config.colorProps[pIndex];cur.style[prop] = data(cur)[prop] || '';}}}};init.prepare = function(context) {// Handle if a DOM collection is passed instead of a single el:if (context && context[0] && context.length && context[0].nodeName) {// Is a DOM collection:var allContexts = Array.prototype.slice.call(context),cIndex = -1, cLen = allContexts.length;while (++cIndex<cLen) { init.prepare.call(null, allContexts[cIndex]); }return;}// Slowly recurses through all elements// so as not to lock up on the user.context = context || document.documentElement;if (!document.createElement('canvas').getContext) { return; }var all = getAllNodes(context),i = -1, len = all.length;while (++i<len) {var cur = all[i];if (data(cur).skip) { return; }if (cur.nodeName.toLowerCase() === 'img') {if (cur.getAttribute('src') && !isExternal(cur.src)) {desatIMG(cur, true);}} else {var style = getStyle(cur, 'backgroundImage');if (style.indexOf('url(') > -1) {var urlPatt = /\(['"]?(.+?)['"]?\)/,url = style.match(urlPatt)[1];if (!isExternal(url)) {var temp = document.createElement('img');temp.src = url;desatIMG(temp, true, cur);}}}}};return init;})();
这有grayscale.js的前提下,我新建了turngray_IE.js。代码如下:
window.onload=function(){grayscale(document.body);
}
在需要变灰的网页代码和之间引入grayscale.js和turngray_IE.js
<script type="text/javascript" src="../assets/js/grayscale.js" ></script>
<script type="text/javascript" src="../assets/js/turngray_IE.js" ></script>
验证是否有效果
省略。涉及到隐私,暂不展示。我试过,无论在手机端还是PC端,无论是Android 、IOS、还是Windows的终端都OK,都有网站置灰的效果。
不足之处
在IE浏览器,window.onload比较消耗客户端浏览器资源,所以加载稍微迟缓。但一般看不出来。
(声明:本人非前端开发人员,仅仅是解决问题。不喜勿喷)
补充-在网站发布系统操作更方便
思路:在一对多网站发布系统中,写一个文件管理功能,可以增加css和js文件以及修改代码,并将本地目录,即发布系统所在服务器网站母版目录,同步到所有ihs服务器或者其他类型的服务器。这样就不用登录每台网站服务器,每个文件去引入css和js了。节省了工作量。具体是在每个html引入以下3行:
然后把turngray.css、grayscale.js、turngray_IE.js放到对应的目录。(相对路径根据实际项目目录来定,此处仅仅举例)
再就是将改动的文件全部同步到各个网站服务器
注:一对多是自定义说法,表示一个发布系统多个网站服务器
默哀日网站置灰,支持IE浏览器h5相关推荐
- 4月4日网站变灰实录
4月4日网站变灰记录 基本都是通过 grayscale 来实现的 都不支持 IE 11 但在 IE 11 的情况下表现却各不相同 B站.A站.淘宝.京东.百度.虎扑.开源中国 B 站 html.gra ...
- 说说filter这个css属性(网站置灰实现)
在2020年4月4日这一天,大家无论打开手机.电脑网页还是APP,都可以看到所有的内容都已经变成了灰色,大家可能还会误以为是网站统一换了一套css样式,不过后面转念一想这么多网站及页面,如果要统一换样 ...
- 新版开运网运势测算网站源码 支持微信/支付宝H5支付 支持分销代理 可封装APP
源码介绍 我在外面花钱购买的某站VIP资源,就是那种搬砖站,买来没时间调试发给大家看看吧,喜欢的就下去玩玩! 支持微信/支付宝H5和电脑端扫码支付.手机端可以调起微信/支付宝应用支付 支持后台设置价格 ...
- 由置灰引出的css滤镜filter是什么东西?
文章目录 前言 一.什么是置灰呀? (1)选择需要的元素全部置灰吧! (2)如何置灰中抽取子内容部分不置灰呢? (3)针对ie10.11怎么搞? 二.针对iframe的内容 三.filter除置灰(g ...
- 在收到消息后秒级使网站变灰,不改代码不上线,如何实现?
注意:文本不是讲如何将网站置灰的那个技术点,那个技术点之前汶川地震的时候说过. 本文不讲如何实现技术,而是讲如何在第一时间知道消息后,更快速的实现这个置灰需求的上线. 实现需求不是乐趣,指挥别人去实现 ...
- h5页面置灰处理源代码,兼容IE(优雅降级提供下载浏览器链接)
h5页面置灰处理源代码 兼容IE(优雅降级提供下载浏览器链接) 马上要到清明节了,有朋友找我要给页面置灰的方案和方法,在网上搜的方法基本都是在Chrome上直接置灰,在ie上就有点难处理了:我找了下之 ...
- html页面整体变灰,CSS + JS 网站变灰(变黑白),兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
- 互联网日报 | 5月21日 星期五 | 张一鸣卸任字节跳动CEO;腾讯一季度营收1353亿元;微软宣布明年停止支持IE浏览器...
今日看点 ✦ 腾讯Q1营收1353.03亿元,微信及WeChat合并月活达12.41亿 ✦ 张一鸣宣布卸任字节跳动CEO,联合创始人梁汝波将接任 ✦ 支付宝小程序数量超300万个,"我的小程 ...
- html谷歌兼容代码,让网站变灰的css代码(支持IE、Firefox和Chrome)
四川雅安芦山发生7.0级别大地震,不少网站首页已经变成了灰色表示哀悼.下面笔者整理了几种让网页变灰色的CSS代码,供各位站长参考! 方法1:支持IE html{filter:progid:DXImag ...
最新文章
- 斯坦佛编程教程-Unix编程工具(二)
- VTK修炼之道8_三维场景基本要素:相机
- 中国蚁剑的下载、安装与使用
- Python3 对于中文文件的读写处理
- 组件,控件,插件,库都是什么鬼啊
- 关于问题 SAP ABAP ME2O 事物码如何(是否可以)打印发货单?如何自己找到答案
- 如何运用领域驱动设计 - 领域服务
- Visual Studio 2010 sp1
- 华为愿出售5G技术渴望对手;苹果将向印度投资10亿美元;华为全联接大会首发计算战略;腾讯自研轻量级物联网操作系统正式开源……...
- UILabel教程 touch 事件
- 600个开源iOS应用库
- 420.强密码检测器
- matlab求定积分
- 常见黑客渗透测试工具
- matlab中grid的用法
- 编程人员的不二之选 LEGION Y9000X正式发布
- 如何给扑克洗牌才能更公平?
- PC机通过二层交换机连接三层交换机
- win7 使用自带无线网卡分享无线网络
- android sd卡名称,科普详解Android系统SD卡各类文件夹名称