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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
js闭包用法实例详解
Dec 13 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
利用js实现简易红绿灯
Oct 15 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制作百度词典查词采集器
2015/01/29 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
js强制把网址设为默认首页
2015/09/29 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
Vue自定义指令详解
2017/07/28 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python 二维数组90度旋转的方法
2019/01/28 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python的turtle库使用详解
2019/05/10 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
《长城》教学反思
2014/02/14 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
献爱心倡议书
2014/04/14 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
小学教育见习报告
2014/10/31 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
Nginx 匹配方式
2022/05/15 Servers
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL