本博客文章已转移到独立博客,请点击做最好的三三查看全文。
7
22
2012
4

innerTEXT,outerHTML,outerTEXT和firefox

本博客文章已转移到独立博客,查看本文请点击做最好的三三查看全文。

Firefox 不支持 DOM 对象的 outerHTML innerText outerText 属性……这是个一直困扰大家(包括我)很久的问题,网上也有不少的解决方法,这里摘录如下,收藏备用。(源链接:http://www.w3help.org/zh-cn/causes/SD9017)

解决方案

在 Firefox 中,可通过扩展 HTMLElement 的原型 (prototype) 来实现相关属性。

  1. 扩展 Firefox 中 DOM 元素的 outerHTML 属性:
    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 += " " + 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());
        });
    }
  2. 扩展 Firefox 中 DOM 元素的 innerText 属性:
    if (!!document.getBoxObjectFor || window.mozInnerScreenX != null) {
        HTMLElement.prototype.__defineSetter__("innerText", function(sText) {
            var parsedText = document.createTextNode(sText);
            this.innerHTML = "";
            this.appendChild(parsedText);
            return parsedText;
        });
        HTMLElement.prototype.__defineGetter__("innerText", function() {
            var r = this.ownerDocument.createRange();
            r.selectNodeContents(this);
            return r.toString();
        });
    }
  3. 扩展 Firefox 中 DOM 元素的 outerText 属性:
    if (!!document.getBoxObjectFor || window.mozInnerScreenX != null) {
        HTMLElement.prototype.__defineSetter__("outerText", function(sText) {
            var parsedText = document.createTextNode(sText);
            this.parentNode.replaceChild(parsedText, this);
            return parsedText;
        });
        HTMLElement.prototype.__defineGetter__("outerText", function() {
            var r = this.ownerDocument.createRange();
            r.selectNodeContents(this);
            return r.toString();
        });
    }
本博客内容除标明外均为原创;转载请保留原文地址或pingback;所有代码所有权归作者所有;在此公布的所有作者标明为本人的代码均可非商业自由使用。
本博客文章已转移到独立博客,发表评论请点击做最好的三三查看全文。
Category: WEB | Tags: html js firefox | Read Count: 2501
Avatar_small
依云 说:
Jul 23, 2012 07:45:31 AM

outerHTML 不是已经有了吗?innerText 和 textContent 不是一样的么?不知道 outerText 是干什么的。

Avatar_small
三三 说:
Jul 23, 2012 11:04:19 AM

Firefox并不支持outerHTML,而且它不是w3c标准。innerTEXT和textContent是一样的……至于outerTEXT,其实就是把outerHTML当text处理,参考http://www.w3help.org/zh-cn/causes/SD9017。

Avatar_small
依云 说:
Jul 23, 2012 11:44:23 AM

我的最新稳定版火狐支持 outerHTML 啊。
那个网站你最好是别看了,涉及到特性支持竟然不标注版本号。

Avatar_small
三三 说:
Jul 23, 2012 11:50:44 AM

我直接Google检索过来的……哪里管得了那么多。
刚刚拿自己firefox试了一下,确实是支持。一开始写脚本的时候模糊印象就是firefox不支持outerHTML,就去Google了一下发现这个,于是就加了。
……嗯,就当是为不支持outerHTML的火狐做的兼容吧……反正我也只是个伪开发……


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com

Power by Chito 1.3.1 beta

| Theme: Aeros 2.0 by TheBuckmaker.com