firefox 下的 javascript

最新推荐文章于 2022-12-17 22:18:11 发布

zgh2002007

最新推荐文章于 2022-12-17 22:18:11 发布

阅读量1k

点赞数

文章标签： firefox javascript function mozilla null reference

本文链接：https://blog.csdn.net/zgh2002007/article/details/1871812

版权

为FireFox添加IE的方法和属性

针对 Firefox 兼容性，要注意的一些问题

本篇内容，主要是个人根据工作中遇到的情况，做个小结。

1 、 Select 列表控件

删除列表项。在 IE 下工作正常的代码：

obj.options.remove(i);

需要修改为：

obj.remove(i);

添加列表项。在 IE 下工作正常的代码：

var oOption = document.createElement('option');
oOption.text = text;
oOption.value = value;
targetArea.options.add(oOption);

为了提供更好的浏览器兼容性，更符合 W3C DOM Level 2 HTML 标准，建议改为如下代码：

var oOption = document.createElement('option');
oOption.text = text;
oOption.value = value;
targetArea.options[targetArea.options.length]= new Option(text,value);

另外， selectObj.options(i) ，需要改为 selectObj.options[i] 。

2 、 XmlDom 对象

IE 下一般这样做：

var xmlDom = new ActiveXObject("Microsoft.XMLDOM");

为了兼容 Firefox ，需要修改为：

if (window.ActiveXObject){
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}
else {
if (document.implementation && document.implementation.createDocument){
var xmlDom = document.implementation.createDocument("","", null );
}
}

3 、对于 childNodes 的循环处理

var nodes=xmlDom.documentElement;
var sName; // 标签文本
var sValue; // 标签值

if (nodes.childNodes.length != 0) {
for ( var i=0;i<nodes.childNodes.length;++i) {
oItem = nodes.childNodes.item(i);
sName = oItem.text;
sValue = oItem.getAttribute("id"); // 这里会报错
addOption(targetArea,sName,sValue);
}
}

上面这段代码，在 IE 下完全没有问题，但是在 Firefox 下就毫无反应， Firefox 下的错误控制台报告： oItem 没有 getAttribute 方法，百思不得其解，经调试，发现 oItem 的节点类型竟然是 3 ，也就是文本，进一步调试得知， oItem 的节点类型分别是 3 、 1 、 3 、 1.... （ 1 是节点对象），使用 Firefox 的 Dom 查看器一看，恍然大悟！其中， Xml 数据字符串为：

< types >
< type id ="215"> 验房服务 </ type >
< type id ="216"> 家装设计 </ type >
< type id ="217"> 建筑工程 </ type >
< type id ="218"> 家装监理 </ type >
< type id ="219"> 检测 ( 环境质量 ) </ type >
< type id ="220"> 风水 </ type >
</ types >

在 Dom 查看器中看到：

可以看到， #text 节点和节点对象交替排列 (id 列有数据的为正常节点，例如 " 验房服务 " 、 " 家装设计 " 等等 ) ，造成当 oItem 为 #text 类型的时候调用 getAttribute() 方法失败，因为文本节点没有此方法。

那么，修改后的代码是：

还有一点需要注意的是 oItem.text 无法在 Firefox 中取得节点的值，取而代之的是：

oItem.childNodes[0].nodeValue;

至此，真相大白！

附录 1 ：帮助我解决问题的两篇关键文章：

1 、 http://www.sitepoint.com/forums/showthread.php?t=307056&goto=nextnewest

2 、 http://www.thescripts.com/forum/thread471907.html

附录 2 ： Node 的类型

nodeType	Named Constant	nodeTypeString	nodeName	nodeValue
1	ELEMENT_NODE	element	tagName	null
2	ATTRIBUTE_NODE	attribute	name	value
3	TEXT_NODE	text	#text	content of node
4	CDATA_SECTION_NODE	cdatasection	#cdata-section	content of node
5	ENTITY_REFERENCE_NODE	entityreference	entity reference name	null
6	ENTITY_NODE	entity	entity name	null
7	PROCESSING_INSTRUCTION_NODE	processinginstruction	target	content of node
8	COMMENT_NODE	comment	#comment	comment text
9	DOCUMENT_NODE	document	#document	null
10	DOCUMENT_TYPE_NODE	documenttype	doctype name	null
11	DOCUMENT_FRAGMENT_NODE	documentfragment	#document fragment	null
12	NOTATION_NODE	notation	notation name	null

Tags ： firefox document microsoft xmldom createdocument ajax 兼容 ie select 选择框

<!--
if(window.Event){// 修正Event的DOM
    /*
                                IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    event                        yes        yes            yes            yes                    yes
    event.returnValue            yes        yes            no            no                    no
    event.cancelBubble            yes        yes            no            no                    no
    event.srcElement            yes        yes            no            no                    no
    event.fromElement            yes        yes            no            no                    no

    */
    Event.prototype.__defineSetter__("returnValue",function(b){//
        if(!b)this.preventDefault();
        return b;
        });
    Event.prototype.__defineSetter__("cancelBubble",function(b){// 设置或者检索当前事件句柄的层次冒泡
        if(b)this.stopPropagation();
        return b;
        });
    Event.prototype.__defineGetter__("srcElement",function(){
        var node=this.target;
        while(node.nodeType!=1)node=node.parentNode;
        return node;
        });
    Event.prototype.__defineGetter__("fromElement",function(){// 返回鼠标移出的源节点
        var node;
        if(this.type=="mouseover")
            node=this.relatedTarget;
        else if(this.type=="mouseout")
            node=this.target;
        if(!node)return;
        while(node.nodeType!=1)node=node.parentNode;
        return node;
        });
    Event.prototype.__defineGetter__("toElement",function(){// 返回鼠标移入的源节点
        var node;
        if(this.type=="mouseout")
            node=this.relatedTarget;
        else if(this.type=="mouseover")
            node=this.target;
        if(!node)return;
        while(node.nodeType!=1)node=node.parentNode;
        return node;
        });
    Event.prototype.__defineGetter__("offsetX",function(){
        return this.layerX;
        });
    Event.prototype.__defineGetter__("offsetY",function(){
        return this.layerY;
        });
    }
if(window.Document){// 修正Document的DOM
    /*
                                IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    document.documentElement    yes        yes            yes            yes                    no
    document.activeElement        yes        null        no            no                    no

    */
    }
if(window.Node){// 修正Node的DOM
    /*
                                IE5        MacIE5        Mozilla        Konqueror2.2        Opera5
    Node.contains                yes        yes            no            no                    yes
    Node.replaceNode            yes        no            no            no                    no
    Node.removeNode                yes        no            no            no                    no
    Node.children                yes        yes            no            no                    no
    Node.hasChildNodes            yes        yes            yes            yes                    no
    Node.childNodes                yes        yes            yes            yes                    no
    Node.swapNode                yes        no            no            no                    no
    Node.currentStyle            yes        yes            no            no                    no

    */
    Node.prototype.replaceNode=function(Node){// 替换指定节点
        this.parentNode.replaceChild(Node,this);
        }
    Node.prototype.removeNode=function(removeChildren){// 删除指定节点
        if(removeChildren)
            return this.parentNode.removeChild(this);
        else{
            var range=document.createRange();
            range.selectNodeContents(this);
            return this.parentNode.replaceChild(range.extractContents(),this);
            }
        }
    Node.prototype.swapNode=function(Node){// 交换节点
        var nextSibling=this.nextSibling;
        var parentNode=this.parentNode;
        node.parentNode.replaceChild(this,Node);
        parentNode.insertBefore(node,nextSibling);
        }
    }
if(window.HTMLElement){
    HTMLElement.prototype.__defineGetter__("all",function(){
        var a=this.getElementsByTagName("*");
        var node=this;
        a.tags=function(sTagName){
            return node.getElementsByTagName(sTagName);
            }
        return a;
        });
    HTMLElement.prototype.__defineGetter__("parentElement",function(){
        if(this.parentNode==this.ownerDocument)return null;
        return this.parentNode;
        });
    HTMLElement.prototype.__defineGetter__("children",function(){
        var tmp=[];
        var j=0;
        var n;
        for(var i=0;i<this.childNodes.length;i++){
            n=this.childNodes[i];
            if(n.nodeType==1){
                tmp[j++]=n;
                if(n.name){
                    if(!tmp[n.name])
                        tmp[n.name]=[];
                    tmp[n.name][tmp[n.name].length]=n;
                    }
                if(n.id)
                    tmp[n.id]=n;
                }
            }
        return tmp;
        });
    HTMLElement.prototype.__defineGetter__("currentStyle", function(){
        return this.ownerDocument.defaultView.getComputedStyle(this,null);
        });
    HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df=r.createContextualFragment(sHTML);
        this.parentNode.replaceChild(df,this);
        return sHTML;
        });
    HTMLElement.prototype.__defineGetter__("outerHTML",function(){
        var attr;
        var attrs=this.attributes;
        var str="<"+this.tagName;
        for(var i=0;i<attrs.length;i++){
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+'="'+attr.value+'"';
            }
        if(!this.canHaveChildren)
            return str+">";
        return str+">"+this.innerHTML+"</"+this.tagName+">";
        });
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
        switch(this.tagName.toLowerCase()){
            case "area":
            case "base":
            case "basefont":
            case "col":
            case "frame":
            case "hr":
            case "img":
            case "br":
            case "input":
            case "isindex":
            case "link":
            case "meta":
            case "param":
                return false;
            }
        return true;
        });

    HTMLElement.prototype.__defineSetter__("innerText",function(sText){
        var parsedText=document.createTextNode(sText);
        this.innerHTML=parsedText;
        return parsedText;
        });
    HTMLElement.prototype.__defineGetter__("innerText",function(){
        var r=this.ownerDocument.createRange();
        r.selectNodeContents(this);
        return r.toString();
        });
    HTMLElement.prototype.__defineSetter__("outerText",function(sText){
        var parsedText=document.createTextNode(sText);
        this.outerHTML=parsedText;
        return parsedText;
        });
    HTMLElement.prototype.__defineGetter__("outerText",function(){
        var r=this.ownerDocument.createRange();
        r.selectNodeContents(this);
        return r.toString();
        });
    HTMLElement.prototype.attachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        fHandler._ieEmuEventHandler=function(e){
            window.event=e;
            return fHandler();
            }
        this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        }
    HTMLElement.prototype.detachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        if(typeof(fHandler._ieEmuEventHandler)=="function")
            this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        else
            this.removeEventListener(shortTypeName,fHandler,true);
        }
    HTMLElement.prototype.contains=function(Node){// 是否包含某节点
        do if(Node==this)return true;
        while(Node=Node.parentNode);
        return false;
        }
    HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){
        switch(where){
            case "beforeBegin":
                this.parentNode.insertBefore(parsedNode,this);
                break;
            case "afterBegin":
                this.insertBefore(parsedNode,this.firstChild);
                break;
            case "beforeEnd":
                this.appendChild(parsedNode);
                break;
            case "afterEnd":
                if(this.nextSibling)
                    this.parentNode.insertBefore(parsedNode,this.nextSibling);
                else
                    this.parentNode.appendChild(parsedNode);
                break;
            }
        }
    HTMLElement.prototype.insertAdjacentHTML=function(where,htmlStr){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML=r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where,parsedHTML);
        }
    HTMLElement.prototype.insertAdjacentText=function(where,txtStr){
        var parsedText=document.createTextNode(txtStr);
        this.insertAdjacentElement(where,parsedText);
        }
    HTMLElement.prototype.attachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        fHandler._ieEmuEventHandler=function(e){
            window.event=e;
            return fHandler();
            }
        this.addEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        }
    HTMLElement.prototype.detachEvent=function(sType,fHandler){
        var shortTypeName=sType.replace(/on/,"");
        if(typeof(fHandler._ieEmuEventHandler)=="function")
            this.removeEventListener(shortTypeName,fHandler._ieEmuEventHandler,false);
        else
            this.removeEventListener(shortTypeName,fHandler,true);
        }
    }
//-->