Javascript中常遇到的浏览器兼容问题和解决方法

[javascript]  view plain  copy

 print ?

1. 常遇到的关于浏览器的宽高问题：  
2.   
3. 复制代码  
4. //以下均可console.log()实验  
5. var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽  
6. var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽  
7. //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框  
8.   
9. var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽  
10. var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高  
11.   
12. var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高  
13. var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离  
14.   
15. var screenH=window.screen.height;//屏幕分辨率的高  
16. var screenW=window.screen.width;//屏幕分辨率的宽  
17. var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）  
18. var screenXX=window.screenX;//FireFox相对于屏幕的X坐标  
19. var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）  
20. var screenYY=window.screenY;//FireFox相对于屏幕的y坐标  
21. 复制代码  
22. event事件问题：  
23.   
24. 复制代码  
25. //event事件问题  
26. document.οnclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；  
27.     var e=ev;  
28.     console.log(e);  
29. }  
30. document.οnclick=function(){//谷歌和IE支持，火狐不支持；  
31.     var e=event;  
32.     console.log(e);  
33. }  
34. document.οnclick=function(ev){//兼容写法；  
35.     var e=ev||window.event;  
36.     var mouseX=e.clientX;//鼠标X轴的坐标  
37.     var mouseY=e.clientY;//鼠标Y轴的坐标  
38. }  
39. 复制代码  
40. DOM节点相关的问题，我直接封装了函数，以便随时可以拿来使用：  
41.   
42. 复制代码  
43. //DOM节点相关，主要兼容IE 6 7 8  
44. function nextnode(obj){//获取下一个兄弟节点  
45.     if (obj.nextElementSibling) {  
46.         return obj.nextElementSibling;  
47.     } else{  
48.         return obj.nextSibling;  
49.     };  
50. }  
51. function prenode(obj){//获取上一个兄弟节点  
52.     if (obj.previousElementSibling) {  
53.         return obj.previousElementSibling;  
54.     } else{  
55.         return obj.previousSibling;  
56.     };  
57. }  
58. function firstnode(obj){//获取第一个子节点  
59.     if (obj.firstElementChild) {  
60.         return obj.firstElementChild;//非IE678支持  
61.     } else{  
62.         return obj.firstChild;//IE678支持  
63.     };  
64. }  
65. function lastnode(obj){//获取最后一个子节点  
66.     if (obj.lastElementChild) {  
67.         return obj.lastElementChild;//非IE678支持  
68.     } else{  
69.         return obj.lastChild;//IE678支持  
70.     };  
71. }  
72. 复制代码  
73. document.getElementsByClassName问题：  
74.   
75. 复制代码  
76. //通过类名获取元素  
77. document.getElementsByClassName('');//IE 6 7 8不支持；  
78.   
79. //这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery...  
80. //第一个为全局获取类名，第二个为局部获取类名  
81. function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.”  
82.     var tags=document.all?document.all:document.getElementsByTagName('*');  
83.     var arr=[];  
84.     for (var i = 0; i < tags.length; i++) {  
85.         var reg=new RegExp('\\b'+oClass+'\\b','g');  
86.         if (reg.test(tags[i].className)) {  
87.             arr.push(tags[i]);  
88.         };  
89.     };  
90.     return arr;//注意返回的也是数组，包含你传入的class所有元素；  
91. }  
92.   
93. function byClass2(parentID,oClass){//局部获取类名，parentID为你传入的父级ID  
94.     var parent=document.getElementById(parentID);  
95.     var tags=parent.all?parent.all:parent.getElementsByTagName('*');  
96.     var arr=[];  
97.     for (var i = 0; i < tags.length; i++) {  
98.     var reg=new RegExp('\\b'+oClass+'\\b','g');  
99.         if (reg.test(tags[i].className)) {  
100.             arr.push(tags[i]);  
101.         };  
102.     };  
103.     return arr;//注意返回的也是数组，包含你传入的class所有元素；  
104.  }  
105. 复制代码  
106. 获取元素的非行间样式值：  
107.   
108. 复制代码  
109. //获取元素的非行间样式值  
110.  function getStyle(object,oCss) {  
111.          if (object.currentStyle) {  
112.              return object.currentStyle[oCss];//IE  
113.          }else{  
114.              return getComputedStyle(object,null)[oCss];//除了IE  
115.          }  
116.  }  
117. 复制代码  
118. 设置监听事件：  
119.   
120. 复制代码  
121. //设置监听事件  
122.  function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false  
123.     if (obj.addEventListener) {  
124.         obj.addEventListener(type,fn,false);//非IE  
125.     } else{  
126.         obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了  
127.     };  
128. }  
129. function removeEvent(obj,type,fn){//删除事件监听  
130.     if (obj.removeEventListener) {  
131.         obj.removeEventListener(type,fn,false);//非IE  
132.     } else{  
133.         obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了  
134.     };  
135. }  
136. 复制代码  
137. 元素到浏览器边缘的距离：  
138.   
139. 复制代码  
140. //在这里加个元素到浏览器边缘的距离，很实用  
141. function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）  
142.     var ofL=0,ofT=0;  
143.     while(obj){  
144.         ofL+=obj.offsetLeft+obj.clientLeft;  
145.         ofT+=obj.offsetTop+obj.clientTop;  
146.         obj=obj.offsetParent;  
147.     }  
148.     return{left:ofL,top:ofT};  
149. }  
150. 复制代码  
151. 阻止事件传播：  
152.   
153. 复制代码  
154. //js阻止事件传播，这里使用click事件为例  
155. document.οnclick=function(e){  
156.     var e=e||window.event;  
157.     if (e.stopPropagation) {  
158.         e.stopPropagation();//W3C标准  
159.     }else{  
160.         e.cancelBubble=true;//IE....  
161.     }  
162. }  
163. 复制代码  
164. 阻止默认事件：  
165.   
166. 复制代码  
167. //js阻止默认事件  
168. document.οnclick=function(e){  
169.     var e=e||window.event;  
170.     if (e.preventDefault) {  
171.         e.preventDefault();//W3C标准  
172.     }else{  
173.         e.returnValue='false';//IE..  
174.     }  
175. }  
176. 复制代码  
177. 关于EVENT事件中的target：  
178.   
179. 复制代码  
180. //关于event事件中的target  
181. document.οnmοuseοver=function(e){  
182.     var e=e||window.event;  
183.     var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE  
184.     var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE...  
185.     var to=e.relatedTarget||e.toElement;//鼠标去的地方  
186. }  
187. 复制代码  
188. 鼠标滚轮滚动事件：  
189.   
190. 复制代码  
191. //鼠标滚轮事件  
192. //火狐中的滚轮事件  
193. document.addEventListener("DOMMouseScroll",function(event){  
194.     alert(event.detail);//若前滚的话为 -3，后滚的话为 3  
195. },false)  
196. //非火狐中的滚轮事件  
197. document.onmousewheel=function(event){  
198.     alert(event.detail);//前滚：120，后滚：-120  
199. }  
200. 复制代码  
201. 节点加载：  
202.   
203. //火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同  
204. //感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。  
205. document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.