邓华

BlogJava 联系 聚合 管理
  48 Posts :: 0 Stories :: 149 Comments :: 0 Trackbacks

/**
 *   兼容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 
  .innerHTML
property 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
  .outerHTML
for instance
   document.body.innerHTML = '<P>Scriptology for all</P>';
which works with both IE4/5 and NN6.

The following provides getter functions for 
  .outerHTML
to 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.com
Kibology 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>
 

posted on 2006-08-01 11:05 邓华的碎碎念 阅读(4023) 评论(1)  编辑  收藏

Feedback

# re: firefox没有outerHTML用以下方法解决 2012-06-07 10:53 hhhhhhhh
1989 6月4日   回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: