如何在 Firefox 中执行 OuterHTML?

IT技术 javascript dom cross-browser
2021-02-06 08:35:49

我的部分代码获得了 OuterHTML 属性

"<LI onclick="TabClicked(this, 'SearchName', 'TabGroup1');">Name "

所以我可以做一些涉及解析它的事情。

但是,firefox 上的 javascript 中没有 OuterHTML 属性,我找不到获取此字符串的替代方法。想法?

6个回答

这是我们在pure.js 中使用的函数

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

以 DOM 方式使用它:

outerHTML(document.getElementById('theNode'));

它可以跨浏览器工作

编辑:警告! XMLSerializer 有问题,它生成一个 XML(XHTML) 字符串。
这意味着您最终可以使用类似的标签<div class="team" />而不是
<div class="team"></div>
某些浏览器不喜欢它。我最近对 ​​Firefox 3.5 感到有些痛苦。

所以对于我们的pure.js库,我们又回到了旧的和安全的方式:

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }
打高尔夫球: document.createElement('_').appendChild(node.cloneNode(true)).innerHTML
2021-03-16 08:35:49
Firefox 11 将原生支持 externalHTML - 请参阅bugzilla.mozilla.org/show_bug.cgi?id=92264
2021-03-23 08:35:49
谢谢,我用了你最后的方法!
2021-03-27 08:35:49
@Nickolay 哇……一个 10 年的请求终于得到了答复!感谢更新
2021-04-03 08:35:49
@yckart,有趣。但是 Chrome 似乎不喜欢 '_',并且您忘记了 parentNode 来获取外部标签。然而,类似的东西document.createElement('div').appendChild( n.cloneNode(true) ).parentNode.innerHTML效果很好。谢谢!
2021-04-04 08:35:49

正确的方法(对于非 IE 浏览器)是:

var sOuterHTML = new XMLSerializer().serializeToString(oElement);
注意 XMLSerializer 生成 XML(XHTML) 然后做类似的事情<div />而不是<div></div>. 在这里看到我的答案。
2021-03-30 08:35:49

如果你愿意使用 jQuery 那么它相对简单:

$('<div>').append( $(ElementSelector).clone() ).html();

如果选择了多个元素,这将获得多个元素的外部 HTML

很好的答案,谢谢!完美地工作。非常简单和干净。
2021-03-23 08:35:49

Firefox 现在支持外层 HTML

面向开发人员的 Firefox 11 开始

Firefox 11 于 2012 年 3 月 13 日发布。本文提供有关此版本中修复的新功能和主要错误的信息,以及指向 Web 开发人员和附加组件开发人员的更详细文档的链接。

  • HTML 元素现在支持 element.outerHTML 属性。

由于 W3C 不包含 outerHTML 属性,您只需要添加以下内容:

if (typeof (HTMLElement) != "undefined" && !window.opera)  
{  
    HTMLElement.prototype._____defineGetter_____("outerHTML", function()  
    {  
        var a = this.attributes, str = "<" + this.tagName, i = 0; for (; i < a.length; i++)  
            if (a[i].specified)  
            str += " " + a[i].name + '="' + a[i].value + '"';  
        if (!this.canHaveChildren)  
            return str + " />";  
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";  
    });  
    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_____("canHaveChildren", function()  
    {  
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());   
    });  
}