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

2024-10-16 20:45:13

对于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 "";
});

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实现代码

减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建,从而提高页面性能.为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中,等完成渲染后再处理这部分HTML来达到这个目的. 要把TextArea 中暂存的HTML内容添加到页面中,使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML,支持的浏览器有IE6+,safari, operal和 Chrome,经测试FF4.0- 中还不支持.所以我
Firefox中使用outerHTML的2种解决方法

对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别: outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:outerHTML Property(http://msdn.microsoft.com/en-us/library/ms534310(VS
基于Android中实现定时器的3种解决方法

在Android开发中,定时器一般有以下3种实现方法:一.采用Handler与线程的sleep(long)方法二.采用Handler的postDelayed(Runnable, long)方法三.采用Handler与timer及TimerTask结合的方法下面逐一介绍:一.采用Handle与线程的sleep(long)方法Handler主要用来处理接受到的消息.这只是最主要的方法,当然Handler里还有其他的方法供实现,有兴趣的可以去查API,这里不过多解释.1. 定义一个Handler类,用
React中this丢失的四种解决方法

发现问题我们在给一个dom元素绑定方法的时候,例如: <input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} /> React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 import Re
C/C++中退出线程的四种解决方法

退出线程可以有四种方法: 1.线程函数的return返回(最好这样):其中用线程函数的return返回, 而终止线程是最安全的, 在线程函数return返回后, 会清理函数内申请的类对象, 即调用这些对象的析构函数. 然后会自动调用 _endthreadex()函数来清理 _beginthreadex(...)函数申请的资源(主要是创建的tiddata对象). 2.调用 _endthreadex()函数或 ExitThread()函数(最好不要):如果使用这两种方法退出线程, 则不会执行线程函
ubuntu中打开终端的三种解决方法

这个不应该称得上是一个问题,但是,发现对于新手,确实是个难题因为少有人能够提到这一点,基本都是上来就直接讲用到的命令.我开始的时候也曾经被这个问题困扰着,后来,搜了一会儿才弄明白.1.在菜单内的附件上面有2.在运行命令的输入框打开3-..--------------------------------------------------------------------------------1.很好弄,在左上角的菜单上点一下,出来一列,在里面选择［附件］中的［终端］,点一下就OK.那是快捷
ASP.NET从客户端中检测到有潜在危险的request.form值的3种解决方法

当页面编辑或运行提交时,出现"从客户端中检测到有潜在危险的request.form值"问题,该怎么办呢?如下图所示: 下面博主汇总出现这种错误的几种解决方法: 问题原因:由于在asp.net中,Request提交时出现有html代码或javascript等字符串时,程序系统会认为其具有潜在危险的值.环境配置会报出"从客户端中检测到有潜在危险的Request.Form值"这样的Error. 1.当前提交页面,添加代码打开当前.aspx页面,页头加上代码:valid
C#向线程中传递多个参数的解决方法(两种)

问题: 对于多线程编程,很多时候往往需要向线程中传递多个参数,而C#中的线程只接收1个object类型的参数(如下): Thread t = new Thread(new ParameterizedThreadStart(newthread)); t.start(参数); void newthread(object) { ............. } 而现在需要往线程中传递多个参数,比如method方法想用单独的线程来跑 void method(int begin,int end) { ...
vue css 引入asstes中的图片无法显示的四种解决方法

这里主要针对的是vuecli2中的一些问题. vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题.但是,一大包发布打线上,就会出现图片无法加载的情况! 这是因为,出于某些原因,有人修改了config目录下的i
PL/SQL Developer过期的两种解决方法

方法一: 1.首先,登陆PL/SQL Developer,PL/SQL Developer要到期了 2.输入指令"regedit"打开注册表,如图所示 3.然后,在注册表里按HKEY_CURRENT_USER\Software\Allround Automations 这个路径找到"Allround Automations ",然后删除它. 4.删除上一步中的后,在找到HKEY_CURRENT_USER\Software\Microsoft\Security,删除&
jQuery prototype冲突的2种解决方法(附demo示例下载)

本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.

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

相关推荐

随机推荐