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有很多方 ...
随机推荐
- Java中方法和类的深入分析
1.构造方法不能被继承.也就是说子类里没有父类的构造方法. Java重载根据的是实参和方法形参之间的匹配.自动类型转换也在重载版本的判断中起到了作用.重载的价值在于允许使用通用名称访问相关的方法. ...
- Python列表简介和遍历
一.Python3列表简介 1.1.Python列表简介 序列是Python中最基本的数据结构 序列中的每个值都有对应的位置值,称之为索引,第一个索引是0,第二个索引是1,以此类推. Python有6 ...
- [BUUCTF]REVERSE——[BJDCTF2020]BJD hamburger competition
[BJDCTF2020]BJD hamburger competition 附件 步骤: 例行检查,64位程序,无壳儿 由于unity是用C++开发的,这里就不用IDA了,直接用dnspy看源码 在B ...
- BUUCTF pwn一分题目
因为以前做过一些题目,看见1分题目也不太多了,就想着,抓紧点把1分题都刷一下吧.所以开个帖子记录一下,题目简单的话就只贴exp了. [BJDCTF 2nd]secret 这里有一个输入可以进行溢出,n ...
- CF1070K Video Posts 题解
Content 有 \(n\) 个数 \(a_1,a_2,a_3,...,a_n\),要求分成 \(k\) 段,每一段的数的总和相等.输出这些段的长度,或者不可能满足要求. 数据范围:\(1\leqs ...
- LuoguB2030 计算线段长度 题解
Content 已知线段的两个端点的坐标 \(A(X_a,Y_a),B(X_b,Y_b)\) ,求线段 \(AB\) 的长度. 数据范围:\(|X_a|,|Y_a|,|X_b|,|Y_b|\leqsl ...
- libevent源码学习(5):TAILQ_QUEUE解析
目录 前言 结点定义 链表初始化 链表查询及遍历 链表查询 链表遍历 插入结点 头插法 尾插法 前插法 后插法 删除结点 替换结点 总结 前言 在libevent中使用到了TAILQ数据结构,看了一下 ...
- Linux(centos) 设置MySQL数据库不区分大小写
1.修改配置文件 vim /etc/my.cnf 在[mysqld]节点下,加入一行: lower_case_table_names=1 2.重启数据库服务 service mysqld restar ...
- 【LeetCode】81. Search in Rotated Sorted Array II 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/search-in ...
- 【LeetCode】590. N-ary Tree Postorder Traversal 解题报告 (C++&Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 相似题目 参考资料 日期 题目地址:htt ...