聊聊一直困扰前端程序员的浏览器兼容-【JavaScript】
上篇已经写过浏览器的兼容发展历史以及主流浏览器,主要的css兼容我知道的已全部写到,这篇这篇专攻javascript的兼容。
1、getYear()方法
var year = new Date().getYear();
document.write(year);
在IE中得到的日期是“2016”,在Firefox中看到的日期是“116”,主要是因为在 Firefox 里面 getYear() 返回的是 "当前年份-1900" 的值。
所以,一般用getFullYear( )方法获取年份。
2、自定义属性问题
IE8及以下版本,可以通过可以使用获取常规属性的方法来获取HTML中的自定义属性;
标准的浏览器,是不能直接获取自定义属性。
解决方法:统一通过 getAttribute() 获取自定义属性。
3. 用getAttribute()的方法获取元素的class名
getAttribute(“class”); //IE7及以下版本不支持该方法,并且在浏览器中的返回值为null,其他浏览器支持该方法;
getAttribute(“className”); // IE7及以下版本支持该方法,其他浏览器不支持
解决方法:
obj.getAttribute('class') === null ? obj.getAttribute('className') : obj.getAttribute('class') //来他个判断
4、获取css的属性方法
element.style.attr; //只能获取行内样式表里的属性;
element.currentStyle.attr; //IE浏览器支持该方法;
getComputedStyle(element).attr; //IE浏览器不支持,其他浏览器支持。
//解决:继续判断 element.currentStyle ?element.currentStyle[attr] : getComputedStyle(element)[attr]
5、空白文本节点
在标准浏览器下,用childNodes获取子节点,会把换行和空白字符都算作父节点的子节点,而在IE8及以下版本的浏览器childNodes不会。
6、window.eventw问题
window.event 能在IE或是在早期版本的谷歌浏览器下运行,而不能在Firefox下运行,这是因为Firefox的event对象只能在事件发生的现场使用,Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。
解决:
document.onclick = function (evt){
var e = evt || wondow.event;
}
7、鼠标按键(event对象的button属性)
标准浏览器中:
0——代表按下鼠标左键;
1——代表按下鼠标滚轮;
2——代表按下鼠标右键;
在IE浏览器中:
1——鼠标左键;
2 ——鼠标右键;
3 ——左右同时按下;
4——鼠标滚轮;
5 ——左键加滚轮;
6——右键加滚轮;
7 ——三个同时按下;
是不是感觉IE很烦;那都有它,兄弟没他咱们前端去那挣钱?继续解决:
document.onmouseup = function(evt){
var e = evt || window.event;
getButton(e);
}
function getButton(e){
if(evt){
return e.button;
}else if( window.event){
switch(e.button){
case 1: return 0;
case 4: return 1;
case 2: return 2
}
} }
8. 冒泡事件的阻止方法:
event . stopPropagation( ) ; //标准浏览器
event . cancelBubble = true ; //IE浏览器的方式, 其他浏览器也支持该方式
9. 阻止超链接的默认行为:
event . preventDefault( ) ; //标准浏览器
event .returnValue = false ; //IE浏览器的方式
10、事件监听器
target. addEventListener(“click”, fun , false); //非IE
target . attachEvent(“onclick”, fun); //IE
11、解除事件监听器
targe . removeEventListener(“click” , fun , false); //非IE
target . detachEvent(“onclick”, fun); //IE
12. 使用AJAX创建核心对象
var xhr = new XMLHttpRequest();
//所有现代浏览器均支持XMLHttpRequest 对象;
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
//IE5 和 IE6使用 ActiveX 对象。
//判断解决
var xml;
if(window.XMLHttpRequest){
xml = new XMLHttpRequest()
}else{
xml = new ActiveXObject(“Microsoft.XMLHTTP”);
}
聊聊一直困扰前端程序员的浏览器兼容-【JavaScript】的更多相关文章
- 聊聊一直困扰前端程序员的浏览器兼容-【css】
1.为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床.再加上各大厂商出于自身利益考虑而设置的种种技术壁 ...
- 【原文】前端程序员必须知道的高性能Javascript知识
原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...
- 前端程序员:月薪 5K 到 5 万,我干了啥(转)
转自:http://www.imooc.com/article/4110 前端程序员:月薪 5K 到 5 万,我干了啥前端开发工作已经变的越来越复杂,仅仅是想罗列一份前端开发的学习列表就已经是一件艰巨 ...
- web前端程序员真的值这么多钱吗?
对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用. 前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会 ...
- 2018年一名合格的web前端程序员应该会哪些技术
有朋友让小编说一说web前端在未来几年的发展趋向,对于这个问题,恕小编无能为力,web前端技术日新月异,更新非常快,谁也不能预料未来会发生些什么 小编也只能说在2018年,react native和j ...
- 前端程序员学习 Golang gin 框架实战笔记之一开始玩 gin
原文链接 我是一名五六年经验的前端程序员,现在准备学习一下 Golang 的后端框架 gin. 以下是我的学习实战经验,记录下来,供大家参考. https://github.com/gin-gonic ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- 前端程序员:月薪 5K 到 5 万,我干了啥
高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上人生巅峰的职业梦想?这篇<进化论:从 0 到 100,前 ...
- 收集的WEB前端程序员需要的网站整理
前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来. 一.插件类网站 jQuery插件库:h ...
随机推荐
- MyBatis 内置日志工厂基于运行时自省机制选择合适的日志工具
mybatis – MyBatis 3 | 日志 http://www.mybatis.org/mybatis-3/zh/logging.html MyBatis 内置日志工厂基于运行时自省机制选择合 ...
- Jmeter,常见参数 vars、prev、ctx 、props 类的api--beanshell
http://www.cnblogs.com/fnng/p/5827577.html---------jmeter 性能测试 jmeter常见参数 vars.prev.ctx .props 类的api ...
- python基础===包的导入和__init__.py的介绍
转自:https://www.cnblogs.com/botoo/p/8241522.html 调用同级目录: – src |– mod.py |– test.py 若在程序test.py中导入模块m ...
- 持续交付的Mesos与Docker导入篇
变革这个词在当今的数字化时代司空见惯,IT技术每过一段时间就会有一起革新,从WEB2.0.虚拟化.云计算.大数据.微架构.DevOps再到今天的容器Docker与Mesos. Docker的出现方便了 ...
- 需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP
需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP 需求:过滤下面这个网页里共723行 校对中里 行数为两位数 ...
- 前端基础(JavaScript)
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...
- requirements.txt
在文件夹下 生成requirements.txt文件 pip freeze > requirements.txt 安装requirements.txt依赖 pip install -r requ ...
- cocos代码研究(21)Widget子类Text,TextAtlas,TextBMFont学习笔记
理论基础 Text类又称ttf格式文本,可以用ttf文件或者系统自带字体,支持文字多,但是ttf文件格式体积大,渲染速度慢: TextBMFont类又称fnt格式文本,纹理创建,根据纹理上有的文字来显 ...
- 编程当道,学点Python技术好傍身
为了填满AI时代的人才缺口,编程语言教育都从娃娃抓起了!如果你还不懂Python是什么将来怎么给孩子辅导作业呢? Python新手入门教程 近期,浙江省信息技术课程改革方案出台,Python言语现已断 ...
- python中的排序
今天在http://www.pythontip.com刷题的时候遇到一个排序的问题:一个列表中既有字符串,又有数字,该怎么排序. list = [1,2,5,4,'d','s','e',45] lis ...