JavaScript-如何解决“FF不能读取outerHTML”的问题

JavaScript-如何解决“FF不能读取outerHTML”的问题

偏爱自由 发布于 2016-12-20 字数 117 浏览 1229 回复 2

对于outerHTML这个DOM属性,在IE/Opera/google Chorme等浏览器中都是可以使用的,但唯独Firefox是不支持,请问怎么解决

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

瑾兮 2017-04-11 2 楼

/**
* 兼容firefox的 outerHTML 使用以下代码后,firefox可以使用element.outerHTML
**/

if(window.HTMLElement) {
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.toLowerCase();
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.toLowerCase()+">";
});

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;

});
}

如果嫌繁琐,还有一种更简单代替的办法,先创建一个空节点,将要获取outerHTML属性的DOM对象添加到这个空节点中,然后访问这个空节点的innerHTML就行了:

function outerHtml(elem){
if(typeof elem === 'string') elem = document.getElementById(elem);
// 创建一个空div节点
var div = document.createElement('div');
// 将复制的elemCopy插入到空div节点中
div.appendChild(elem.cloneNode(true));
// 返回div的HTML内容
return div.innerHTML;
};

泛泛之交 2017-04-04 1 楼

创建一个div元素,然后将要读取的元素的克隆对象放到这个div中,读取这个div的childNode即可
document.createElement(“DIV”).appendChild(htmlNode.cloneNode(true)).parentNode.innerHTML)