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实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
javascript前端实现多视频上传
Dec 13 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
实例讲解PHP表单
2020/06/10 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Django+Vue跨域环境配置详解
2018/07/06 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python生成验证码图片代码分享
2016/01/28 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Unix如何添加新的用户
2014/08/20 面试题
机关财务管理制度
2014/01/17 职场文书
十八大感想感言
2014/02/10 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015年平安创建工作总结
2015/04/29 职场文书