Firefox outerHTML实现代码_javascript技巧

减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。 要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML，支持的浏览器有IE6+,safari, operal和 Chrome，经测试FF4.0- 中还不支持。所以我们就来实现一个可以跨浏览器的outerHTML。
outerHTML 就是获取或设置包含元素标签本身在内的html。下面是实现代码：

复制代码 代码如下:

if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
//console.log("defined outerHTML");
HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
var fragment = document.createDocumentFragment();
var div = document.createElement("div");
div.innerHTML = str;
for(var i=0, n = div.childNodes.length; i<n; i++){
fragment.appendChild(div.childNodes[i]);
}
this.parentNode.replaceChild(fragment, this);
});
//
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var tag = this.tagName;
var attributes = this.attributes;
var attr = [];
//for(var name in attributes){//遍历原型链上成员
for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数
if(attributes[i].specified){
attr.push(attributes[i].name + '="' + attributes[i].value + '"');
}
}
return ((!!this.innerHTML) ?
'<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' :
'<' + tag + ' ' +attr.join(' ')+'/>');
});
}

代码说明：
1 代码中首先条件判断来监测浏览器是否支持outerHTML以避免覆盖浏览器原生的实现。
2 "__defineSetter__"，"__defineGetter__" 是firefox浏览器私有方面。分别定义当设置属性值和获取属性要执行的操作。
3 在"__defineSetter__" "outerHTML"中为了避免插入页面中元素过多导致频繁发生reflow影响性能。使用了文档碎片对象fragment来暂存需要插入页面中DOM元素。
4 在"__defineGetter__" "outerHTML" 中使用元素attributes属性来遍历给元素指定的属性。结合innerHTML返回了包含原属本身在内的html字符串。
测试代码：

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>outerHTML</title>
</head>
<body>
<div id="content" class="test">
<p>This is <strong>paragraph</strong> with a list following it</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<script>
if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
console.log("defined outerHTML");
HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
var fragment = document.createDocumentFragment();
var div = document.createElement("div");
div.innerHTML = str;
for(var i=0, n = div.childNodes.length; i<n; i++){
fragment.appendChild(div.childNodes[i]);
}
this.parentNode.replaceChild(fragment, this);
});
//
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var tag = this.tagName;
var attributes = this.attributes;
var attr = [];
//for(var name in attributes){//遍历原型链上成员
for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数
if(attributes[i].specified){
attr.push(attributes[i].name + '="' + attributes[i].value + '"');
}
}
return ((!!this.innerHTML) ?
'<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' :
'<' + tag + ' ' +attr.join(' ')+'/>');
});
}
var content = document.getElementById("content");
alert(content.outerHTML)
</script>
</body>
</html>

假设要获取 <p id="outerID">sdfdsdfsd</p> 的 P的outerHTML
代码：

复制代码 代码如下:

var _p = document.getElementById('outerID');
_P = _P.cloneNode();
var _DIV = document.createElement();
_DIV.appendChild(_P);
alert(_DIV.innerHTML); 就是P的outerHTML;

firefox没有outerHTML用以下方法解决

复制代码 代码如下:

/**
* 兼容firefox的 outerHTML 使用以下代码后，firefox可以使用element.outerHTML
**/
if(window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function(){
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for(var i=0;i<attrs.length;i++){
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function(){
switch(this.tagName.toLowerCase()){
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}

测试有效.
关于insertAdjacentHTML兼容的解新决办法

复制代码 代码如下:

//---在组件最后插入html代码
function InsertHtm(op,code,isStart){
if(Dvbbs_IsIE5)
op.insertAdjacentHTML(isStart ? "afterbegin" : "afterEnd",code);
else{
var range=op.ownerDocument.createRange();
range.setStartBefore(op);
var fragment = range.createContextualFragment(code);
if(isStart)
op.insertBefore(fragment,op.firstChild);
else
op.appendChild(fragment);
}
}

关于inner/outerHTML在NC6中的参考
DOM level 1 has no methods to allow for insertion of unparsed HTML into the document tree (as IE allows with insertAdjacentHTML or assignment to inner/outerHTML).NN6 (currently in beta as NN6PR3) know supports the .innerHTMLproperty of HTMLElements so that you can read or write the innerHTML of a page element like in IE4+.NN6 also provides a DOM level 2 compliant Range object to which a createContextualFragment('html source string')was added to spare DOM scripters the task of parsing html and creating DOM elements.You create a Range with var range = document.createRange();Then you should set its start point to the element where you want to insert the html for instance var someElement = document.getElementById('elementID'); range.setStartAfter(someElement);Then you create a document fragment from the html source to insert for example var docFrag = range.createContextualFragment('<P>Kibology for all.</P>');and insert it with DOM methods someElement.appendChild(docFrag);The Netscape JavaScript 1.5 version even provides so called setters for properties which together with the ability to prototype the DOM elements allows to emulate setting of outerHMTL for NN6:<SCRIPT LANGUAGE="JavaScript1.5">if (navigator.appName == 'Netscape') { HTMLElement.prototype.outerHTML setter = function (html) { this.outerHTMLInput = html; var range = this.ownerDocument.createRange(); range.setStartBefore(this); var docFrag = range.createContextualFragment(html); this.parentNode.replaceChild(docFrag, this); }}</SCRIPT> If you insert that script block you can then write cross browser code assigning to .innerHTML .outerHTMLfor instance document.body.innerHTML = '<P>Scriptology for all</P>';which works with both IE4/5 and NN6.The following provides getter functions for .outerHTMLto allow to read those properties in NN6 in a IE4/5 compatible way. Note that while the scheme of traversing the document tree should point you in the right direction the code example might not satisfy your needs as there are subtle difficulties when trying to reproduce the html source from the document tree. See for yourself whether you like the result and improve it as needed to cover other exceptions than those handled (for the empty elements and the textarea element).<HTML><HEAD><STYLE></STYLE><SCRIPT LANGUAGE="JavaScript1.5">var emptyElements = { HR: true, BR: true, IMG: true, INPUT: true};var specialElements = { TEXTAREA: true};HTMLElement.prototype.outerHTML getter = function () { return getOuterHTML (this);}function getOuterHTML (node) { var html = ''; switch (node.nodeType) { case Node.ELEMENT_NODE: html += '<'; html += node.nodeName; if (!specialElements[node.nodeName]) { for (var a = 0; a < node.attributes.length; a++) html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"'; html += '>'; if (!emptyElements[node.nodeName]) { html += node.innerHTML; html += '<\/' + node.nodeName + '>'; } } else switch (node.nodeName) { case 'TEXTAREA': for (var a = 0; a < node.attributes.length; a++) if (node.attributes[a].nodeName.toLowerCase() != 'value') html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"'; else var content = node.attributes[a].nodeValue; html += '>'; html += content; html += '<\/' + node.nodeName + '>'; break; } break; case Node.TEXT_NODE: html += node.nodeValue; break; case Node.COMMENT_NODE: html += '<!' + '--' + node.nodeValue + '--' + '>'; break; } return html;}</SCRIPT></HEAD><BODY><A HREF="javascript: alert(document.documentElement.outerHTML); void 0">show document.documentElement.outerHTML</A>|<A HREF="javascript: alert(document.body.outerHTML); void 0">show document.body.outerHTML</A>|<A HREF="javascript: alert(document.documentElement.innerHTML); void 0">show document.documentElement.innerHTML</A>|<A HREF="javascript: alert(document.body.innerHTML); void 0">show document.body.innerHTML</A><FORM NAME="formName"><TEXTAREA NAME="aTextArea" ROWS="5" COLS="20">JavaScript.FAQTs.comKibology for all.</TEXTAREA></FORM><DIV><P>JavaScript.FAQTs.com</P><BLOCKQUOTE>Kibology for all.<BR>All for Kibology.</BLOCKQUOTE></DIV></BODY></HTML>Note that the getter/setter feature is experimental and its syntax is subject to change.
HTMLElement.prototype.innerHTML setter = function (str) { var r = this.ownerDocument.createRange(); r.selectNodeContents(this); r.deleteContents(); var df = r.createContextualFragment(str); this.appendChild(df); return str;}HTMLElement.prototype.outerHTML setter = function (str) { var r = this.ownerDocument.createRange(); r.setStartBefore(this); var df = r.createContextualFragment(str); this.parentNode.replaceChild(df, this); return str;}
HTMLElement.prototype.innerHTML getter = function () { return getInnerHTML(this);}
function getInnerHTML(node) { var str = ""; for (var i=0; i<node.childNodes.length; i++) str += getOuterHTML(node.childNodes.item(i)); return str;}
HTMLElement.prototype.outerHTML getter = function () { return getOuterHTML(this)}
function getOuterHTML(node) { var str = ""; switch (node.nodeType) { case 1: // ELEMENT_NODE str += "<" + node.nodeName; for (var i=0; i<node.attributes.length; i++) { if (node.attributes.item(i).nodeValue != null) { str += " " str += node.attributes.item(i).nodeName; str += "=\""; str += node.attributes.item(i).nodeValue; str += "\""; } }
if (node.childNodes.length == 0 && leafElems[node.nodeName]) str += ">"; else { str += ">"; str += getInnerHTML(node); str += "<" + node.nodeName + ">" } break; case 3: //TEXT_NODE str += node.nodeValue; break; case 4: // CDATA_SECTION_NODE str += "<![CDATA[" + node.nodeValue + "]]>"; break; case 5: // ENTITY_REFERENCE_NODE str += "&" + node.nodeName + ";" break;
case 8: // COMMENT_NODE str += "<!--" + node.nodeValue + "-->" break; }
return str;}
var _leafElems = ["IMG", "HR", "BR", "INPUT"];var leafElems = {};for (var i=0; i<_leafElems.length; i++) leafElems[_leafElems[i]] = true;
然后我们可以封成JS引用
if (/Mozilla\/5\.0/.test(navigator.userAgent)) document.write('<script type="text/javascript" src="mozInnerHTML.js"></sc' + 'ript>');

复制代码 代码如下:

<script language="JavaScript" type="Text/JavaScript">
<!--
var emptyElements = { HR: true, BR: true, IMG: true, INPUT: true }; var specialElements = { TEXTAREA: true };
HTMLElement.prototype.outerHTML getter = function() {
return getOuterHTML(this);
}
function getOuterHTML(node) {
var html = '';
switch (node.nodeType) {
case Node.ELEMENT_NODE: html += '<'; html += node.nodeName; if (!specialElements[node.nodeName]) {
for (var a = 0; a < node.attributes.length; a++)
html += ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue + '"';
html += '>';
if (!emptyElements[node.nodeName]) {
html += node.innerHTML;
html += '<\/' + node.nodeName + '>';
}
} else
switch (node.nodeName) {
case 'TEXTAREA': for (var a = 0; a < node.attributes.length; a++)
if (node.attributes[a].nodeName.toLowerCase() != 'value')
html
+= ' ' + node.attributes[a].nodeName.toUpperCase() + '="' + node.attributes[a].nodeValue
+ '"';
else
var content = node.attributes[a].nodeValue;
html += '>'; html += content; html += '<\/' + node.nodeName + '>'; break;
} break;
case Node.TEXT_NODE: html += node.nodeValue; break;
case Node.COMMENT_NODE: html += '<!' + '--' + node.nodeValue + '--' + '>'; break;
}
return html;
}
//-->
</script>

时间： 2024-10-26 08:26:29

Firefox outerHTML实现代码_javascript技巧的相关文章

window.event.keyCode兼容IE和Firefox实现js代码_javascript技巧

HTML代码 复制代码 代码如下: <input type="text" onkeydown="keyNumAll(event);" > Javascript 代码 复制代码 代码如下: function keyNumAll(evt){ //兼容IE和Firefox获得keyBoardEvent对象 evt = (evt) ? evt : ((window.event) ? window.event : ""); var key =

Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 运行以上代码,即可.如果大家想看的是 javascript indexOf的使用方法,请看下面的文章javascript indexOf函数使用说明JavaScript indexOf忽略大小写_javascript技巧

javascript实现上传图片并预览的效果实现代码_javascript技巧

今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像.假如忽略此参数,滤镜将不会作用. 复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http

在浏览器中获取当前执行的脚本文件名的代码_javascript技巧

背景 同事提了一个问题,如何在浏览器中动态插入的 JavaScript 文件中,获取当前文件名? 除了服务器输出一个文件名外,在脚本中获取应该只有下面三种做法. 解法A 普遍的解法,只能用于页面静态scripts标签引入或者单个动态加载. 复制代码 代码如下: var scripts = document.getElementsByTagName('script'); var filename = scripts[scripts.length -1].src; 动态插入多个脚本标签的情况: 复制

统一接口：为FireFox添加IE的方法和属性的js代码_javascript技巧

如何在Z-Blog中运行代码(纯JS版)一文中由于FF不支持insertAdjacentElement,造成无法显示"运行代码"链接.今天Google了一下,发现一篇好文,将下面的脚本存成iedom4moz.js文件,每页调用--OK,一切搞定!独乐乐,不如众乐乐,分享给诸位了^_^ 复制代码 代码如下: // JavaScript Document  // 统一接口:为FireFox添加IE的方法和属性  if(window.Event){// 修正Event的DOM    /* 

兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码_javascript技巧

在编写处理xml的网页时,经常为浏览器兼容性头疼.于是我将常用的xml操作封装为函数.经过一段时间的改进,现在已经很稳定了,用起来很舒服. 函数有-- xml_loadFile:xml同步/异步加载. xml_transformNode:xsl转换. xml_text:节点的文本. selectSingleNode:根据XPath选择单个节点. selectNodes:根据XPath选择多个节点. 全部代码(zyllibjs_xml.js)-- 复制代码 代码如下: /* zyllibjs_xm

firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码_javascript技巧

在ie中,事件对象是作为一个全局变量来保存和维护的. 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象. 所以在代码中,只要轻松调用 window.event 就可以轻松获取 事件对象, 再 event.srcElement 就可以取得触发事件的元素进行进一步处理在ff中, 事件对象却不是全局对象,一般情况下,是现场发生,现场使用,ff把事件对象自动传递给对应的事件处理函数. 在代码中,函数的第一个参数就是ff下的事件对象了. 以上是我个人对两个浏览器下

让FireFox支持innerText的实现代码_javascript技巧

为firefox实现innerText属性很多代码写了又忘忘了又写,很浪费,所以决定养成做笔记的习惯. 知识点: 0.为什么要innerText?因为安全问题 1.为firefox dom模型扩展属性 2.currentStyle属性可以取得实际的style状态 3.IE实现innerText时考虑了display方式,如果是block则加换行 4.为什么不用textContent?因为textContent没有考虑元素的display方式,所以不完全与IE兼容 复制代码 代码如下: <html

使用JavaScript检测Firefox浏览器是否启用了Firebug的代码_javascript技巧

在启用了firebug面板后,会增加一个window.console对象及window.console.firebug变量用于保存当前firebug的当前版本,当关闭firebug面板后则变回正常,于是我们可以通过判断其是否存在来检测是否开启了firebug. 复制代码 代码如下: Boolean(window.console && window.console.firebug) 于是,为了方便在没有启用firebug的情况下避免脚本错误,可以在脚本最前面加入以下语句手工创建空的conso