iview在ie9及以上的兼容问题解决方案
兼容requestAnimationFrame
let lastTime = 0
let vendors = ['ms', 'moz', 'webkit', 'o']
for (let x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
let currTime = new Date().getTime()
let timeToCall = Math.max(0, 16 - (currTime - lastTime))
let callbackParams = currTime + timeToCall
let id = window.setTimeout(() => { callback(callbackParams) }, timeToCall)
lastTime = currTime + timeToCall
return id
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id)
}
}
兼容classList
if (!('classList' in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function () {
let self = this
function update (fn) {
return function (value) {
let classes = self.className.split(/s+/g)
let index = classes.indexOf(value)
fn(classes, index, value)
self.className = classes.join(' ')
}
}
return {
add: update(function (classes, index, value) {
if (!~index) classes.push(value)
}),
remove: update(function (classes, index) {
if (~index) classes.splice(index, 1)
}),
toggle: update(function (classes, index, value) {
if (~index) { classes.splice(index, 1) } else { classes.push(value) }
}),
contains: function (value) {
return !!~self.className.split(/s+/g).indexOf(value)
},
item: function (i) {
return self.className.split(/s+/g)[i] || null
}
}
}
})
}
兼容dataset
if (window.HTMLElement) {
if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
Object.defineProperty(HTMLElement.prototype, 'dataset', {
get: function () {
let attributes = this.attributes // 获取节点的所有属性
let name = []
let value = [] // 定义两个数组保存属性名和属性值
let obj = {} // 定义一个空对象
for (let i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
// 取出属性名的"data-"的后面的字符串放入name数组中
name.push(attributes[i].nodeName.slice(5))
// 取出对应的属性值放入value数组中
value.push(attributes[i].nodeValue)
}
}
for (let j = 0; j < name.length; j++) { // 遍历name和value数组
obj[name[j]] = value[j] // 将属性名和属性值保存到obj中
}
return obj // 返回对象
}
})
}
}
iview在ie9及以上的兼容问题解决方案的更多相关文章
- ie9及以下不兼容event.target.dataset对象
ie9及以下不兼容event.target.dataset对象,请使用event.target.getAttribute('data-xxx')
- jquery remove()不兼容问题解决方案
jquery remove()不兼容问题解决方案 CreationTime--2018年7月27日10点19分 Author:Marydon 1.情景展示 点击关闭,将这个div移除掉 源码展示 ...
- javascript window.showModalDialog不兼容goole解决方案
window.showModalDialog不兼容goole解决方案 一.弹框方案: 1.window.open; 2.window.showModalDialog; 3.div制作窗口:(本节忽略) ...
- MUI - sortable在mui.js前端框架不兼容的解决方案
关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github
- ie9下网页设计兼容模式
个人实践使用:ie9下使用低版本ie兼容模式,在网站第一个页面的<head>标签后使用<meta http-equiv="X-UA-Compatible" con ...
- IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包
<!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.j ...
- 上传图片转为base64格式预览并压缩图片(不兼容IE9以下浏览器,兼容移动端ios,android)
前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...
- Vue(SPA) WebPack模块化打包、SEO优化(Vue SSR服务端同构直出)、全浏览器兼容完整解决方案
白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...
- html5 placeholder ie 不兼容问题 解决方案
解决HTML5 placeholder的方案 来源: 时间:2013-09-05 20:06:49 阅读数:11375 分享到: 0 [导读] 使低版本浏览器支持Placeholder有很多方 ...
随机推荐
- 查看MySQL正在执行的线程
一.使用SQL语句查询正在执行的线程 SHOW PROCESSLIST; 二.使用kill 线程id就可以结束线程(引起数据变化的线程需特别小心) SHOW PROCESSLIST; +------+ ...
- react-hook简单使用
一.函数式组件创建 function HelloComponent(props, /* context */) { return <div>Hello {props.name}</d ...
- JS 双向数据绑定、单项数据绑定
简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 解决Tomcat10.0.12源码编译问题进而剖析其优秀分层设计架构
概述 Tomcat.Jetty.Undertow这几个都是非常有名实现Servlet规范的应用服务器,Tomcat本身也是业界上非常优秀的中间件,简单可将Tomcat看成是一个Http服务器+Serv ...
- java 集合Collections 工具类:排序,查找替换。Set、List、Map 的of方法创建不可变集合
Collections 工具类 Java 提供1个操作 Set List Map 等集合的工具类 Collections ,该工具类里提供了大量方法对集合元素进行排序.查询和修改等操作,还提供了将集合 ...
- redis查看redis 客户端状态
查看redis客户端连接 redis-cli info clients # Clients connected_clients:6000 client_longest_output_list:0 cl ...
- 查找局域网中未知设备的IP
先运行net view,然后再运行arp -a 设备启动前后对比IP列表
- 使用.NET 6开发TodoList应用(6)——使用MediatR实现POST请求
需求 需求很简单:如何创建新的TodoList和TodoItem并持久化. 初学者按照教程去实现的话,应该分成以下几步:创建Controller并实现POST方法:实用传入的请求参数new一个数据库实 ...
- 【LeetCode】367. Valid Perfect Square 解题报告(Java & Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:完全平方式性质 方法二:暴力求解 方法三:二 ...
- 【LeetCode】190. Reverse Bits 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 二进制字符串翻转 位运算 日期 题目地址:https://le ...