Firefox中使用outerHTML的2种解决方法
2014-06-07 00:00
211 查看
对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别:
outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx)。目前IE、Chrome、Safari、Opera都能支持这个属性,杯具的是outerHTML不支持Firefox,在Firefox中该属性永远返回undefined,值得欣慰的是HTML5会加入这个属性。
让Firefox支持outerHTML属性可以通过扩展HTMLElement的原型来实现:
该方法出自W3Help(http://www.w3help.org/zh-cn/causes/SD9017),有点繁琐,而且还要侵入原型。还有一种更简单代替的办法,先创建一个空节点,将要获取outerHTML属性的DOM对象添加到这个空节点中,然后访问这个空节点的innerHTML就行了:
比起上面的办法,不用去动原型,代码量也少了很多,相信还会有其他的解决办法。
outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx)。目前IE、Chrome、Safari、Opera都能支持这个属性,杯具的是outerHTML不支持Firefox,在Firefox中该属性永远返回undefined,值得欣慰的是HTML5会加入这个属性。
让Firefox支持outerHTML属性可以通过扩展HTMLElement的原型来实现:
if (typeof(HTMLElement) != "undefined") { 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__("outerHTML", function(){ var a = this.attributes, str = "<" this.tagName, i = 0; for (; i < a.length; i ) if (a[i].specified) str = " " Hormis dans les machines a sous preferees universelles, les casinos offrent des jeux par exemple Grandes six roues, Pai Go Poker, Blackjack, Baccarat, la <a href="http://topcasinosenligne.com/la-roulette">Roulette </a>et le Craps, entre autres. a[i].name "="" a[i].value """; if (!this.canHaveChildren) return str " />"; return str ">" this.innerHTML "<!--" this.tagName "-->"; }); HTMLElement.prototype.__defineGetter__("canHaveChildren", function(){ return !/^(area|base|basefont| col|frame|hr|img|br| input|isindex|link|meta |param)$/.test(this.tagName.toLowerCase()); }); }
该方法出自W3Help(http://www.w3help.org/zh-cn/causes/SD9017),有点繁琐,而且还要侵入原型。还有一种更简单代替的办法,先创建一个空节点,将要获取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; };
比起上面的办法,不用去动原型,代码量也少了很多,相信还会有其他的解决办法。
相关文章推荐
- Firefox中使用outerHTML的2种解决方法
- 解决FF下不能使用outerHTML的2种方法
- 解决Firefox中有时使用window.close()脚本无法关闭当前窗口的方法
- FireFox中使用ExtJs日期控件错误的解决方法
- firefox开启多进程方法 以及 火狐 (firefox)不能使用 showmodaldialog 解决方法
- 使用jQuery解决IE与FireFox下createElement方法的差异
- Firefox下使用JS解决不能submit的方法
- jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
- firefox开启多进程方法 以及 火狐 (firefox)不能使用 showmodaldialog 解决方法
- firefox没有outerHTML用以下方法解决
- Firefox中动态创建元素后不能马上使用的解决方法 Ajax__
- jqPlot——基于jquery的图表绘制工具简单使用,jqPlot 在firefox 火狐浏览器里面,图表右侧的标题,变形的解决方法
- python爬虫,selenium使用,Firefox-chrome-IE问题解决方法,selenium的基本操作
- JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
- FireFox中使用ExtJs日期控件错误的解决方法
- 使用jQuery解决IE与FireFox下createElement方法的差异
- 解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
- Ubuntu的FireFox无法使用HTML5播放器的解决方法
- Firefox 使用常见问题和解决方法
- ubuntu14.04中关于flash插件在firefox无法使用的解决方法