兼容各浏览器的功能封装代码

  1 //查看滚动条的滚动距离
  2 function getScrollOffset() {
  3     if (window.pageXOffset) {
  4         return {
  5             x: window.pageXOffset,
  6             y: window.pageYOffset
  7         }
  8     } else {
  9         return {
 10             x: document.body.scrollLeft + document.documentElement.scrollLeft,
 11             y: document.body.scrollTop + document.documentElement.scrollTop
 12         }
 13     }
 14 }
 15 
 16 //查看视口的尺寸
 17 function getViewportOffset() {
 18     if (window.innerWidth) {
 19         return {
 20             w: window.innerWidth,
 21             h: window.innerHeight
 22         }
 23     } else {
 24         if (document.compatMode === "BackCompat") {
 25             return {
 26                 w: document.body.clientWidth,
 27                 h: document.body.clientHeight
 28             }
 29         } else {
 30             return {
 31                 w: document.documentElement.clientWidth,
 32                 h: document.documentElement.clientHeight
 33             }
 34         }
 35     }
 36 }
 37 
 38 //元素相对于文档的坐标
 39 function getElementPosition(dom) {
 40     var left = dom.offsetLeft;
 41     var top = dom.offsetTop;
 42     while (1) {
 43         dom = dom.offsetParent;
 44         if (dom) {
 45             left += dom.offsetLeft;
 46             top += dom.offsetTop;
 47         } else {
 48             break;
 49         }
 50     }
 51     return {
 52         left: left,
 53         top: top
 54     };
 55 }
 56 
 57 
 58 //获取样式
 59 function getStyle(elem, prop) {
 60     if (window.getComputedStyle) {
 61         return window.getComputedStyle(elem, null)[prop];
 62     } else {
 63         return elem.currentStyle[prop];
 64     }
 65 }
 66 
 67 //兼容的 添加事件函数
 68 function addEvent(elem, type, handle) {
 69     if (elem.addEventListener) {
 70         elem.addEventListener(type, handle, false);
 71     } else if (elem.attachEvent) {
 72         elem.attachEvent('on' + type, function() {
 73             handle.call(elem);
 74         })
 75     } else {
 76         elem['on' + type] = handle;
 77     }
 78 }
 79 
 80 // 取消冒泡
 81 function stopBubble(event) {
 82     if (event.stopPropagation) {
 83         event.stopPropagation();
 84     } else {
 85         event.stopBubble = true;
 86     }
 87 }
 88 
 89 //阻止默认事件
 90 function cancelHandler(event) {
 91     if (event.preventDefault) {
 92         event.preventDefault();
 93     } else {
 94         event.returnValue = false;
 95     }
 96 }
 97 
 98 // 取消事件 
 99 function removeEvent(elem, type, myFunction) {
100     if (elem.removeEventListener) {                // 所有浏览器，除了 IE 8 及更早IE版本
101         elem.removeEventListener(type, myFunction);
102     } else if (elem.detachEvent) { 
103         elem.detachEvent('on' + type, myFunction);
104     }
105 }
106 
107 // 拖拽
108 function drap(elem) {
109     var disX,
110         disY;
111     addEvent(elem, 'mousedown', function(e) {
112         var event = e || window.event;
113         disX = event.pageX - parseInt(getStyle(elem, 'left'));
114         disY = event.pageY - parseInt(getStyle(elem, 'top'));
115         addEvent(document, 'mousemove', mouseMove);
116         addEvent(document, 'mouseup', mouseUp);
117         stopBubble(event);
118         cancelHandler(event);
119     });
120 
121     function mouseMove(e) {
122         var event = e || window.event;
123         elem.style.left = event.pageX - disX + 'px';
124         elem.style.top = event.pageY - disY + 'px';
125     }
126 
127     function mouseUp(e) {
128         var event = e || window.event;
129         removeEvent(document, 'mousemove', mouseMove);
130         removeEvent(document, 'mouseup', mouseUp);
131     }
132 }
133 
134 
135 //仿 fixed
136 function positionFixed(elem) {
137     var elemTop = elem.offsetTop;
138     window.onscroll = function() {
139         div.style.top = window.pageYOffset + elemTop + 'px';
140     }
141 }
142 
143 //异步加载,创建script 标签,插入到DOM中,加载完毕后callback
144 function loadScript(url, callback) {
145     var script = document.createElement('script');
146     script.type = 'text/javascript';
147     if(script.readyState) {
148         script.onreadystatechange = function() {    //IE
149             if(script.readyState == 'complete' || script.readyState == 'loaded') {
150                 callback();
151             }
152         }
153     }else {
154         script.onload = function() {                //非IE
155             callback();
156         }
157     }
158     script.src = url;
159     document.head.appendChild(script);
160 }
161 // 调用
162 // loadScript('demo.js', function(){ test(); });
163 //callback 不可直接写 test ,因为当执行调用代码时, js文件还没有加载,系统无法识别 test 是什么,就会报错,
164 //所以就需要一个立即执行函数,再需要调用时再调用;