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


Posted in Javascript onJune 07, 2014

对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别:
Firefox中使用outerHTML的2种解决方法

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

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

Javascript 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
CSS常用网站布局实例
Apr 03 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 #Javascript
判断iframe里的页面是否加载完成
Jun 06 #Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 #Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 #Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 #Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 #Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 #Javascript
You might like
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python中DJANGO简单测试实例
2015/05/11 Python
python版大富翁源代码分享
2018/11/19 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Django中的静态文件管理过程解析
2019/08/01 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
付款证明模板
2015/06/19 职场文书
python xlwt模块的使用解析
2021/04/13 Python
go原生库的中bytes.Buffer用法
2021/04/25 Golang
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Go 中的空白标识符下划线
2022/03/25 Golang
mysql sql常用语句大全
2022/06/21 MySQL