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 相关文章推荐
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
JS hashMap实例详解
May 26 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
HTML的select控件美化
Mar 27 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
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游戏编程25个脚本代码
2011/02/08 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python lxml中etree的简单应用
2019/05/10 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python 通过文件夹导入包的操作
2020/06/01 Python
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
实习生自我鉴定范文
2013/12/05 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
单位授权委托书范本
2014/09/26 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
医学会议开幕词
2016/03/03 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python