您的位置：首页 > Web前端 > JavaScript

几个JavaScript的浏览器差异处理问题

2016-01-12 15:01 573 查看
原文链接：http://www.nowamagic.net/librarys/veda/detail/1507

JQuery确实是个很好用的库，你可以不用考虑很多细节方面的事情。但很作为一个web前端，处理和了解浏览器差异一个重要问题。下面将介绍一些总结，先介绍没有使用js库的情况。


1. setAttribute方法设置元素类名

在jQuery中，直接使用attr()方法即可，可在原生的JS中，

1
//这个是W3C的标准，在兼容W3C标准的浏览器中有效，可是，IE才是国内用户的主旋律
2
element.setAttribute(
'class'
,
'newClassName'
)
3
//这样的设置在IE中才能有效
4
element.setAttribute(
'className'
,
'newClassName'
)
5
//所有浏览器有效(只要支持javascript)
6
element.className
=
'newClassName'
好了，开篇说完了，这篇文章的目的也就是介绍浏览器差异的同时使前端的朋友们了解如果用最有效的方法去解决问题，下面继续。


2. FireFox没有window.event对象

FireFox没有window.event对象，只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成：

1
function
handle(e)
2
{
3
e
= e || event;
4
...
5
}

3. DOMContentLoaded事件原理
对window.onload事件是当页面解析/DOM树建立完成，并完成了如图片、脚本、样式表等所有资源的下载后才触发的。这对于很多实际的应用而言有点太"迟"了，比较影响用户体验。为了解决这个问题，FF中便增加了一个DOMContentLoaded方法，与onload相比，该方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载(这个也就是jquery.ready()事件的实现原理)。

01
//以下是jQuery
1.4.2版本的原版分析
02
bindReady:
function
()
{
03
　　
if
 
(
readyBound ) {
04
　　　　
return
;
05
　　}
06
　　readyBound
=
true
;
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();
11
　　}
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
27
　　　　
var
 
toplevel
=
false
;
28
　　　　
try
 
{
29
　　　　　　toplevel
=window.frameElement == 
null
;
30
　　　　}
catch
(e)
{}
31
　　　　
if
 
(
document.documentElement.doScroll && toplevel ) {
32
　　　　　　doScrollCheck();
33
　　　　}
34
　　}
35
}
设计思路 - 将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,确实,处理兼容性的问题确实会越来越恶心,可是没有办法,既然没有办法改变,那么请享受...

01
<!--[if
IE]>
02
<h1>您正在使用IE浏览器</h1>
03
<![endif]-->
04
<!--[if
IE 5]>
05
<h1>版本
5</h1>
06
<![endif]-->
07
<!--[if
IE 5.0]>
08
<h1>版本
5.0</h1>
09
<![endif]-->
10
<!--[if
IE 5.5]>
11
<h1>版本
5.5</h1>
12
<![endif]-->
13
<!--[if
IE 6]>
14
<h1>版本
6</h1>
15
<![endif]-->
16
<!--[if
IE 7]>
17
<h1>版本
7</h1>
18
<![endif]-->

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航