让FF和IE离得更近

ariex 楼主

找东西的时候看到的，给FF添加了IE专有的属性和方法

1. <script language="JavaScript" type="Text/JavaScript">
   
2. <!--
   
3. if(window.Event){// 修正Event的DOM
   
4.     /*
   
5.                                 IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
   
6.     event                        yes        yes            yes            yes                    yes
   
7.     event.returnValue            yes        yes            no            no                    no
   
8.     event.cancelBubble            yes        yes            no            no                    no
   
9.     event.srcElement            yes        yes            no            no                    no
   
10.     event.fromElement            yes        yes            no            no                    no
    
11.    
    
12.     */
    
13.     Event.prototype.__defineSetter__("returnValue",function(b){//
    
14.         if(!b)this.preventDefault();
    
15.         return b;
    
16.         });
    
17.     Event.prototype.__defineSetter__("cancelBubble",function(b){// 设置或者检索当前事件句柄的层次冒泡
    
18.         if(b)this.stopPropagation();
    
19.         return b;
    
20.         });
    
21.     Event.prototype.__defineGetter__("srcElement",function(){
    
22.         var node=this.target;
    
23.         while(node.nodeType!=1)node=node.parentNode;
    
24.         return node;
    
25.         });
    
26.     Event.prototype.__defineGetter__("fromElement",function(){// 返回鼠标移出的源节点
    
27.         var node;
    
28.         if(this.type=="mouseover")
    
29.             node=this.relatedTarget;
    
30.         else if(this.type=="mouseout")
    
31.             node=this.target;
    
32.         if(!node)return;
    
33.         while(node.nodeType!=1)node=node.parentNode;
    
34.         return node;
    
35.         });
    
36.     Event.prototype.__defineGetter__("toElement",function(){// 返回鼠标移入的源节点
    
37.         var node;
    
38.         if(this.type=="mouseout")
    
39.             node=this.relatedTarget;
    
40.         else if(this.type=="mouseover")
    
41.             node=this.target;
    
42.         if(!node)return;
    
43.         while(node.nodeType!=1)node=node.parentNode;
    
44.         return node;
    
45.         });
    
46.     Event.prototype.__defineGetter__("offsetX",function(){
    
47.         return this.layerX;
    
48.         });
    
49.     Event.prototype.__defineGetter__("offsetY",function(){
    
50.         return this.layerY;
    
51.         });
    
52.     }
    
53. if(window.Document){// 修正Document的DOM
    
54.     /*
    
55.                                 IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    
56.     document.documentElement    yes        yes            yes            yes                    no
    
57.     document.activeElement        yes        null        no            no                    no
    
58.    
    
59.     */
    
60.     }
    
61. if(window.Node){// 修正Node的DOM
    
62.     /*
    
63.                                 IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    
64.     Node.contains                yes        yes            no            no                    yes
    
65.     Node.replaceNode            yes        no            no            no                    no
    
66.     Node.removeNode                yes        no            no            no                    no
    
67.     Node.children                yes        yes            no            no                    no
    
68.     Node.hasChildNodes            yes        yes            yes            yes                    no
    
69.     Node.childNodes                yes        yes            yes            yes                    no
    
70.     Node.swapNode                yes        no            no            no                    no
    
71.     Node.currentStyle            yes        yes            no            no                    no
    
72.    
    
73.     */
    
74.     Node.prototype.replaceNode=function(Node){// 替换指定节点
    
75.         this.parentNode.replaceChild(Node,this);
    
76.         }
    
77.     Node.prototype.removeNode=function(removeChildren){// 删除指定节点
    
78.         if(removeChildren)
    
79.             return this.parentNode.removeChild(this);
    
80.         else{
    
81.             var range=document.createRange();
    
82.             range.selectNodeContents(this);
    
83.             return this.parentNode.replaceChild(range.extractContents(),this);
    
84.             }
    
85.         }
    
86.     Node.prototype.swapNode=function(Node){// 交换节点
    
87.         var nextSibling=this.nextSibling;
    
88.         var parentNode=this.parentNode;
    
89.         node.parentNode.replaceChild(this,Node);
    
90.         parentNode.insertBefore(node,nextSibling);
    
91.         }
    
92.     }
    
93. if(window.HTMLElement){
    
94.     HTMLElement.prototype.__defineGetter__("all",function(){
    
95.         var a=this.getElementsByTagName("*");
    
96.         var node=this;
    
97.         a.tags=function(sTagName){
    
98.             return node.getElementsByTagName(sTagName);
    
99.             }
    
100.         return a;
     
101.         });
     
102.     HTMLElement.prototype.__defineGetter__("parentElement",function(){
     
103.         if(this.parentNode==this.ownerDocument)return null;
     
104.         return this.parentNode;
     
105.         });
     
106.     HTMLElement.prototype.__defineGetter__("children",function(){
     
107.         var tmp=[];
     
108.         var j=0;
     
109.         var n;
     
110.         for(var i=0;i<this.childNodes.length;i++){
     
111.             n=this.childNodes[i];
     
112.             if(n.nodeType==1){
     
113.                 tmp[j++]=n;
     
114.                 if(n.name){
     
115.                     if(!tmp[n.name])
     
116.                         tmp[n.name]=[];
     
117.                     tmp[n.name][tmp[n.name].length]=n;
     
118.                     }
     
119.                 if(n.id)
     
120.                     tmp[n.id]=n;
     
121.                 }
     
122.             }
     
123.         return tmp;
     
124.         });
     
125.     HTMLElement.prototype.__defineGetter__("currentStyle", function(){
     
126.         return this.ownerDocument.defaultView.getComputedStyle(this,null);
     
127.         });
     
128.     HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
     
129.         var r=this.ownerDocument.createRange();
     
130.         r.setStartBefore(this);
     
131.         var df=r.createContextualFragment(sHTML);
     
132.         this.parentNode.replaceChild(df,this);
     
133.         return sHTML;
     
134.         });
     
135.     HTMLElement.prototype.__defineGetter__("outerHTML",function(){
     
136.         var attr;
     
137.         var attrs=this.attributes;
     
138.         var str="<"+this.tagName;
     
139.         for(var i=0;i<attrs.length;i++){
     
140.             attr=attrs[i];
     
141.             if(attr.specified)
     
142.                 str+=" "+attr.name+'="'+attr.value+'"';
     
143.             }
     
144.         if(!this.canHaveChildren)
     
145.             return str+">";
     
146.         return str+">"+this.innerHTML+"</"+this.tagName+">";
     
147.         });
     
148.     HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
     
149.         switch(this.tagName.toLowerCase()){
     
150.             case "area":
     
151.             case "base":
     
152.             case "basefont":
     
153.             case "col":
     
154.             case "frame":
     
155.             case "hr":
     
156.             case "img":
     
157.             case "br":
     
158.             case "input":
     
159.             case "isindex":
     
160.             case "link":
     
161.             case "meta":
     
162.             case "param":
     
163.                 return false;
     
164.             }
     
165.         return true;
     
166.         });
     
167. 
     
168.     HTMLElement.prototype.__defineSetter__("innerText",function(sText){
     
169.         var parsedText=document.createTextNode(sText);
     
170.         this.innerHTML=parsedText;
     
171.         return parsedText;
     
172.         });
     
173.     HTMLElement.prototype.__defineGetter__("innerText",function(){
     
174.         var r=this.ownerDocument.createRange();
     
175.         r.selectNodeContents(this);
     
176.         return r.toString();
     
177.         });
     
178.     HTMLElement.prototype.__defineSetter__("outerText",function(sText){
     
179.         var parsedText=document.createTextNode(sText);
     
180.         this.outerHTML=parsedText;
     
181.         return parsedText;
     
182.         });
     
183.     HTMLElement.prototype.__defineGetter__("outerText",function(){
     
184.         var r=this.ownerDocument.createRange();
     
185.         r.selectNodeContents(this);
     
186.         return r.toString();
     
187.         });
     
188.     HTMLElement.prototype.attachEvent=function(sType,fHandler){
     
189.         var shortTypeName=sType.replace(/on/,"");
     
190.         fHandler._ieEmuEventHandler=function(e){
     
191.             window.event=e;
     
192.             return fHandler();
     
193.             }
     
194.         this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
     
195.         }
     
196.     HTMLElement.prototype.detachEvent=function(sType,fHandler){
     
197.         var shortTypeName=sType.replace(/on/,"");
     
198.         if(typeof(fHandler._ieEmuEventHandler)=="function")
     
199.             this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
     
200.         else
     
201.             this.removeEventListener(shortTypeName,fHandler,true);
     
202.         }
     
203.     HTMLElement.prototype.contains=function(Node){// 是否包含某节点
     
204.         do if(Node==this)return true;
     
205.         while(Node=Node.parentNode);
     
206.         return false;
     
207.         }
     
208.     HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){
     
209.         switch(where){
     
210.             case "beforeBegin":
     
211.                 this.parentNode.insertBefore(parsedNode,this);
     
212.                 break;
     
213.             case "afterBegin":
     
214.                 this.insertBefore(parsedNode,this.firstChild);
     
215.                 break;
     
216.             case "beforeEnd":
     
217.                 this.appendChild(parsedNode);
     
218.                 break;
     
219.             case "afterEnd":
     
220.                 if(this.nextSibling)
     
221.                     this.parentNode.insertBefore(parsedNode,this.nextSibling);
     
222.                 else
     
223.                     this.parentNode.appendChild(parsedNode);
     
224.                 break;
     
225.             }
     
226.         }
     
227.     HTMLElement.prototype.insertAdjacentHTML=function(where,htmlStr){
     
228.         var r=this.ownerDocument.createRange();
     
229.         r.setStartBefore(this);
     
230.         var parsedHTML=r.createContextualFragment(htmlStr);
     
231.         this.insertAdjacentElement(where,parsedHTML);
     
232.         }
     
233.     HTMLElement.prototype.insertAdjacentText=function(where,txtStr){
     
234.         var parsedText=document.createTextNode(txtStr);
     
235.         this.insertAdjacentElement(where,parsedText);
     
236.         }
     
237.     HTMLElement.prototype.attachEvent=function(sType,fHandler){
     
238.         var shortTypeName=sType.replace(/on/,"");
     
239.         fHandler._ieEmuEventHandler=function(e){
     
240.             window.event=e;
     
241.             return fHandler();
     
242.             }
     
243.         this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
     
244.         }
     
245.     HTMLElement.prototype.detachEvent=function(sType,fHandler){
     
246.         var shortTypeName=sType.replace(/on/,"");
     
247.         if(typeof(fHandler._ieEmuEventHandler)=="function")
     
248.             this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
     
249.         else
     
250.             this.removeEventListener(shortTypeName,fHandler,true);
     
251.         }
     
252.     }
     
253. //-->
     
254. </script>

复制代码

举个例子，在FF中使用currentStyle：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='cn' lang='cn'> <head> <style type="text/css"> #a{width:100px;height:100px;background-color:yellow;} </style> <script type="text/javascript"> window.onload=function(){ HTMLElement.prototype.__defineGetter__("currentStyle", function(){return this.ownerDocument.defaultView.getComputedStyle(this,null);}); //上面一行代码就给所有的HTML元素添加了currentStyle属性 var a=document.getElementById("a"); alert("style中的width=\""+a.style.width+"\"\tcurrentStyle中的width=\""+a.currentStyle.width+"\""); } </script> </head><body> <div id="a"></div> </body> </html>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

搭车问个问题，IE中能不能像这样给页面元素添加自定义的属性和方法？

chensulong

FF中专有的__defineGetter__和__defineSetter方法。对IE不会造成任何副作用。
__defineGetter__接受两个参数(propertyName,fn getMethod)

前一个参数：propertyName 就是制定元素的某个属性。
后一个参数：fn getMethod是一个函数，当取某个元素（对象）的上面的property name属性的时候，就调用这个函数，返回值就是上面的属性的值。

同理，__defineSetter__就是用来设置属性用的，同样也是Mozilla FireFox钟专有的方法。也接受两个参数(propertyName,fn setMethod)

通过这两个函数就可以模拟出很多IE中独有的属性，使得FF和IE对属性的使用更通用，编程时障碍更小。

楼上的例子就很实用！

ariex 楼主

ls挖尸体的。。。


我还是很想知道，IE里有没类似FF中HTMLElement这个东西？

chensulong

我是初学者，不知道MF中的HTMLElement是什么东西，但是可以通过下面的代码对比一下IE和FF的区别。

<script> try{alert(HTMLElement);alert("你使用的是MozillaFireFox");} catch(e){ alert("你使用了IE浏览器，所以看不到HTMLElement了!"); alert(Object); } </script>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 chensulong 于 2008-3-6 20:41 编辑 ]

bjaj

看完了,但还是不明白

77me

看过这个 我问过IE中能不能像FF一样这么做 答案是否定的。
还有 楼主发的这些 有时候并不好用。

尽量还是自己写一些标准的吧。

jikeytang

看了还是不明白，但是得回一下。