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 01 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
详细讲解JS节点知识
Jan 31 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jquery高效反选具体实现
May 05 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JS面试题中深拷贝的实现讲解
May 07 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python中正则的使用指南
2016/12/04 Python
浅谈python中get pass用法
2019/03/19 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
2014年清明节寄语
2014/04/03 职场文书
检讨书模板
2015/01/29 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
环境卫生标语
2015/08/03 职场文书
公司车辆管理制度
2015/08/04 职场文书
周一给客户的问候语
2015/11/10 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL