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 中对象的继承〔转贴〕
Jan 22 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
vue双向数据绑定知识点总结
Apr 18 Javascript
react 创建单例组件的方法
Apr 26 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微信开发之微信录音临时转永久存储
2018/01/26 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Anaconda入门使用总结
2018/04/05 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python实现年会抽奖程序
2019/01/22 Python
python实现从ftp服务器下载文件
2020/03/03 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
如何理解python面向对象编程
2020/06/01 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
小学生竞选班长演讲稿
2014/04/24 职场文书
交通工程专业推荐信
2014/09/06 职场文书
个人自荐书范文
2015/03/09 职场文书
简爱读书笔记
2015/06/26 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL