验证码前端对各浏览器的支持

最新推荐文章于 2022-09-24 09:42:28 发布

weixin_34082789

最新推荐文章于 2022-09-24 09:42:28 发布

阅读量257

点赞数

文章标签：前端 javascript json ViewUI

原文链接：https://juejin.im/post/5af2c07a518825673a208c98

版权

由于CSS， JS的更新，各浏览器对新功能的支持各有差异，当使用新功能特性时，必然会带来一些需要兼容处理的情况，以下就从CSS, JS两个方面说明下验证码对各浏览器的支持。

CSS兼容

低版本IE处理css的兼容，主要是IE，IE6/7/8/9 正常写一个样式，类似：{ 属性名：属性值 } 就可以，但是有些情况下，我们需要针对低版本的IE使用特殊样式，那我们就可以在属性名前加上前缀，各版本IE都有各种识别的属性前缀写法，如下： _position: fixed // IE6 *position: fixed // IE6, IE7 position: fixed \9 // IE6, IE7, IE8, IE9 position: fixed // 正常写法示例如：IE inline-block兼容： *display: inline; *zoom:1; vertical-align:middle;
元素居中处理通用处理：使用 translate 属性兼容方案：在IE6/7/8下，使用 margin-left, margin-top 属性来定位位置
Canvas兼容验证码中canvas 主要用到图片的显示，在IE和低版本的Android系统对canvas的支持很弱，经常导致图片不能显示，验证码不能使用， canvas兼容对验证码很重要。验证码的原始图片是打乱的，如下图：

验证码实际显示效果如下图：

通用处理：通过canvas的方法，如：getImageData, putImageData, drawImage，来绘制图片兼容处理：把图片显示在很多div结构中，图片作为背景图，HTML源码效果如下：

动画处理：通用处理：CSS3新功能，如 keyframes, transition 来实现动画效果。兼容方案：JS处理，通过requestAnimationFrame或者setTimeout，定时修改元素属性，让用户视觉感受流畅的效果

JS部分现在JS的标准更新比较快，从ES3, ES5到现在时髦的ES6, ES7，浏览器厂商的支持个不同，而我们又要支持老版本的浏览器，所以JS的代码都是从ES3开始兼容，我们也使用了一些新特性，为了保证兼容，我们会自己实现polyfills

Promise, Generator 这两个特性是在ES6开始支持，开源的polyfill也是很多，实现起来也还好
原生对象的方法扩展，如Array, Object, JSON 以下列表是我们原生实现的方法 Array indexOf, map, filter Object assign JSON stringify
事件支持 DOM支持的事件方法兼容处理： addEventListener/removeEventListener, attachEvent/detachEvent, onType/null 代码示例：

IE6/7 跨域接口请求正常都是通过XMLHttpRequest对象发送，处理跨域很多都是通过POST方式，服务端设置处理。但是IE6/7不支持，就只能通过jsonp处理， jsonp是GET请求，参数都在url中传输， IE6/7下URL长度限制小，很容易遇到URL长度限制的问题，所以在IE6/7下，我们对URL长度会限制大小，以免请求不成功

关注