让ff对outerHTML的支持

转载地址：http://hi.baidu.com/yuanbaoharvey/blog/item/4d6a21cbec6e830c00e928f6.html

测试extjs的DomQuery时，写了一段代码在ie等其它浏览器都可以，在ff下却不行，代码如下：

<div>

<b>123</b>

<span>易建联</span>

<span>孙悦</span>

</div>

Ext.onReady(function(){

var _array = Ext.DomQuery.select("div > span") ;
  for(var _i = 0 ; _i < _array.length ; _i ++)
   alert(_array[_i].outerHTML) ;

});

 

结果是：

alert(undefined);

alert(undefiend);

解决方案：

以下代码只实现了“读”OUTERHTML，未实现“写”。另在最下面附带网上的解决办法，可以把“写”加在其中。

    把这段代码插入JS中即可，原理：判断是否支持HTMLElement，如果不支持，则加入outerHTML属性。

 

if(typeof(HTMLElement)!="undefined" && !window.opera){

HTMLElement.prototype.__defineGetter__("outerHTML",function() 
{ 
var str=this.parentNode.innerHTML;
i=str.indexOf(this.innerHTML);
var start=i-1;
var end=i+this.innerHTML.length;
while (str.substr(end,1)!=">") end++;
while (str.substr(start,1)!="<") start--;
str = str.substr(start,end-start+1);
return str;
});

}

 

网上的Firefox OuterHTML解决方法：

if (typeof (HTMLElement) != "undefined" && !window.opera) {
    HTMLElement.prototype.__defineGetter__("outerHTML", function() {
        var a = this.attributes, str = "<" + this.tagName, i = 0;
        for (; i < a.length; i++)
            if (a[i].specified)
                str += " " + a[i].name + '="' + a[i].value + '"';
        if (!this.canHaveChildren)
            return str + " />";
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";
    });
    HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(s);
        this.parentNode.replaceChild(df, this);
        return s;
    });
    HTMLElement.prototype
            .__defineGetter__(
                    "canHaveChildren",
                    function() {
                        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/
                                .test(this.tagName.toLowerCase());
                    });
}