Firefox中使用outerHTML的2种解决方法_javascript技巧

对于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的原型来实现:

复制代码 代码如下:

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; 
};

比起上面的办法,不用去动原型,代码量也少了很多,相信还会有其他的解决办法。

时间: 2024-08-10 22:14:48

Firefox中使用outerHTML的2种解决方法_javascript技巧的相关文章

js的form表单提交url传参数(包含+等特殊字符)的两种解决方法_javascript技巧

方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

IE6浏览器中window.location.href无效的解决方法_javascript技巧

本文实例讲述了IE6浏览器中window.location.href无效的解决方法.分享给大家供大家参考.具体方法如下: window.location.href是js中跳转功能,很多人在ie6中都会发现window.location.href不能跳转了,下面我给大家来介绍一下其原因与解决方法. 问题代码如下: 复制代码 代码如下: <a href="javascript:void(0);" onclick="javascript:test();">点击

ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法_javascript技巧

这是一个小bug,解决方法有两种:根据做的东西不同选择不同的 <ion-nav-bar class="bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> <h2>helloafds</h2> </ion-nav-bar> <ion-header-ba

JavaScript中Textarea滚动条不能拖动的解决方法_javascript技巧

本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法.分享给大家供大家参考,具体如下: 在IE中,你是否碰到过Textarea的滚动条不能拖动,但点上下按钮可以滚动内容? 这个问题的原因很可能就是在该Textarea中绑定了onfocus事件,但是,基于某种条件,又将其焦点去掉(即blur()),这样就导致滚动条不能拖动. 一个典型的例子为: me.$input.on("focus",function(){ if ($isIE && me.ena

iframe的onload在Chrome/Opera中执行两次Bug的解决方法_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>iframe的onload在Chrome/Opera中执行两次</title> </head> <body> <script> var ifr = document.createElement('iframe'); ifr.onload =

javascript事件函数中获得事件源的两种不错方法_javascript技巧

在javascript的事件响应中,许多情况我们需要获得事件源对象来对其属性进行更改,比如更改img的src属性.在事件响应函数中获得事件源的方法有如下两种: 第一种: 直接把作为一个参数传入.例如 复制代码 代码如下: <div id="myid" onclick="show(this);">text</div> <script type="text/javascript"> function show(ob

IE浏览器中图片onload事件无效的解决方法_javascript技巧

故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位,并用一个loading类将显示出一个loading背景图,判断在可视区的时候替换成真正的图片,图片加载成功后删除loading类. 问题出在最后面,测试的时候发现在IE下loading类无法删除,当时代码如下: 复制代码 代码如下: img.src = _src;img.src = _src;img.onload = function(){   _con.delCla

前端开发过程中浏览器版本的两种判定方法_javascript技巧

在网上查找浏览器及版本判定方法有好多,此处小弟总结一二,以节省大家时间. 1.jquery的方法: 通过正则表达式可判定常用浏览器及其版本. 复制代码 代码如下: <span style="font-size:12px">function allinfo(){ var ua = navigator.userAgent; ua = ua.toLowerCase(); var match = /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera

仅img元素创建后不添加到文档中会执行onload事件的解决方法_javascript技巧

示例 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>仅img元素创建后却不添加到文档中会执行onload事件</title> </HEAD> <BODY> <script> var img = document.createElement('img'); img.src = &qu