JQuery确实是个很好用的库,你可以不用考虑很多细节方面的事情。但很作为一个web前端,处理和了解浏览器差异一个重要问题。下面将介绍一些总结,先介绍没有使用js库的情况。
1. setAttribute方法设置元素类名
在jQuery中,直接使用attr()方法即可,可在原生的JS中,
1 |
//这个是W3C的标准,在兼容W3C标准的浏览器中有效,可是,IE才是国内用户的主旋律 |
2 |
element.setAttribute( 'class' , 'newClassName' ) |
4 |
element.setAttribute( 'className' , 'newClassName' ) |
5 |
//所有浏览器有效(只要支持javascript) |
6 |
element.className = 'newClassName' |
好了,开篇说完了,这篇文章的目的也就是介绍浏览器差异的同时使前端的朋友们了解如果用最有效的方法去解决问题,下面继续。
2. FireFox没有window.event对象
FireFox没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成:
3. DOMContentLoaded事件原理
对window.onload事件是当页面解析/DOM树建立完成,并完成了如图片、脚本、样式表等所有资源的下载后才触发的。这对于很多实际的应用而言有点太"迟"了,比较影响用户体验。为了解决这个问题,FF中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载(这个也就是jquery.ready()事件的实现原理)。
01 |
//以下是jQuery 1.4.2版本的原版分析 |
02 |
bindReady: function () { |
07 |
// Catch cases where $(document).ready() is called after the |
08 |
// browser event has already occurred. |
09 |
if ( document.readyState === "complete" ) { |
10 |
return jQuery.ready(); |
12 |
// Mozilla, Opera and webkit nightlies currently support this event |
13 |
if ( document.addEventListener ) { |
14 |
// Use the handy event callback |
15 |
document.addEventListener( "DOMContentLoaded" , DOMContentLoaded, false ); |
16 |
// A fallback to window.onload, that will always work |
17 |
window.addEventListener( "load" , jQuery.ready, false ); |
18 |
// If IE event model is used |
19 |
} else if ( document.attachEvent ) { |
20 |
// ensure firing before onload, |
21 |
// maybe late but safe also for iframes |
22 |
document.attachEvent( "onreadystatechange" , DOMContentLoaded); |
23 |
// A fallback to window.onload, that will always work |
24 |
window.attachEvent( "onload" , jQuery.ready ); |
25 |
// If IE and not a frame |
26 |
// continually check to see if the document is ready |
29 |
toplevel = window.frameElement == null ; |
31 |
if ( document.documentElement.doScroll && toplevel ) { |
设计思路 - 将Webkit与Firefox同等对待,都是直接注册DOMContentLoaded事件,但是由于Webkit是在525以上版本才引入的,因此存在兼容性的隐患。 对于IE,首先注册document的onreadystatechange事件,经测试,该方式与window.onload相当,依然会等到所有资源下载完毕后才触发。 之后,判断如果是IE并且页面不在iframe当中,则通过setTiemout来不断的调用documentElement的doScroll方法,直到调用成功则出触发DOMContentLoaded。1 jQuery对于IE的解决方案的原理是,在IE下,DOM的某些方法只有在DOM解析完成后才可以调用,doScroll就是这样一个方法,反过来当能调用doScroll的时候即是DOM解析完成之时,与prototype中的document.write相比,该方案可以解决页面有iframe时失效的问题。此外,jQuery似乎担心当页面处于iframe中时,该方法会失效,因此实现代码中做了判断,如果是在iframe中则通过document的onreadystatechange来实现,否则通过doScroll来实现。不过经测试,即使是在iframe中,doScroll依然有效。
4. 学会使用IE的条件注释
许多前端总是在抱怨万恶的IE,确实,处理兼容性的问题确实会越来越恶心,可是没有办法,既然没有办法改变,那么请享受...
先总结到这里吧,希望能对新手或者有需要的人有所帮助。
- Javascript不同浏览器差异及兼容方法
原文链接:http://caibaojian.com/js-ie-different-from-firefox.html javascript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能 ...
- Javascript常见浏览器兼容问题
常见浏览器原生javascript兼容性问题主要分为以下几类: 一.Dom 1.获取HTML元素,兼容所有浏览器方法:document.getElementById("id")以I ...
- JavaScript获取浏览器版本等信息
** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...
- JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...
- JavaScript判断浏览器类型及版本
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...
- [译]JavaScript检测浏览器前缀
原文地址: Detect Vendor Prefix with JavaScript 不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情.这些前缀可以用于CSS(比如 ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- 使用javascript判断浏览器类型
之前在项目中遇到过要针对不同浏览器做不同的一些js或者css操作,后来某个朋友也突然问到这个问题,所以,整理了一下,在这里留个笔记,方便以后使用. 使用javascript判断浏览器类型: funct ...
- javascript自定义浏览器右键菜单
javascript自定义浏览器右键菜单 在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...
随机推荐
- 数据分析处理库Pandas——时间
时间戳 向后推的时间戳 备注:五天后的时间. 指定日期和时间 时间的Series结构 按要求显示时间(开始时间,时间间隔,时间个数) 转换为时间格式,并设置时间列为索引列 方法一 方法二 筛选显示 方 ...
- python_day4_shopping
购物车例子,实现显示商品信息,输入商品编号并且可以减去自己的存入余额,当商品价格大于自己的余额的时候,直接退出:当不再选择商品的时候,退出显示余额和已经添加的商品. #购物车程序 product_li ...
- python2.7练习小例子(十二)
12):题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数" ...
- Zookeeper系列(二) Zookeeper配置说明
在配置ZooKeeper配置文件时,有些参数是必需的,有些参数是可选的,这些必需的参数构成了Zookeeper配置文件的最低配置要求,如果需要对ZooKeeper进行更详细的配置,可以 ...
- springboot2.x+maven+proguard代码混淆
由于需要将源码打包做代码混淆,选择proguard,开始使用各种问题,各种jar包版本问题,但最终成功了,记录一下,也希望能够帮助大家 在pom中添加代码: <build> <fin ...
- jmeter3.0生成html格式的dashboard性能测试结果
jmeter3.0以上支持生成dashboard的html报告,官网介绍:https://jmeter.apache.org/usermanual/generating-dashboard.html ...
- 基于jersey和Apache Tomcat构建Restful Web服务(二)
基于jersey和Apache Tomcat构建Restful Web服务(二) 上篇博客介绍了REST以及Jersey并使用其搭建了一个简单的“Hello World”,那么本次呢,再来点有趣的东西 ...
- Linux常用命令及搭建测试环境
题外话:三大操作系统------Linux.Unix.Windows,Unix系统如常见的Mac OS,Linux的很多命令跟Unix是通用的,所以就有一些开发人猿喜欢用苹果的原因.Linux发行版特 ...
- PL/SQL查看表结构
SET LONG 99999;SET LINESIZE 140 PAGESIZE 1000;SELECT DBMS_METADATA.GET_DDL('&OBJECT_TYPE','& ...
- react实现网站换肤功能
一.目标 提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理 1.准备不同主题色的样式文件: 2.将用户的选择记录在本地缓存中: 3.每次进入应用时,读取缓存 ...