如何在Firefox的纯文本文件上使用innerHTML？

如果你在浏览器中打开一个文本文件（.txt，.js，.css，...），它会被包装在一个漂亮的DOM树中。如何在Firefox的纯文本文件上使用innerHTML？

例如，打开this .txt file并进入

javascript:alert(document.documentElement.innerHTML);

地址栏中。很不错...每个主流浏览器都支持在这个包装文本文件上进行DOM操作，这对于编写强大的书签或user scripts是一件好事。

但是，Firefox无法在上指定任何元素的innerHTML。例如，

javascript: document.body.innerHTML = document.body.innerHTML.replace(/(\d+\s+\w+(?=\s+\d+))/g, '<span style="color:red">$1</span>'); void 0;

将工作在除Firefox之外的每个浏览器中。

解决这个问题有什么窍门吗？

（不，我不想手动解析的innerHTML字符串，不，它不使用jQuery工作的。）

来源

2009-04-11 user123444555621

DOM被设计为使用HTML和XML。文本文件既不是。 http://en.wikipedia.org/wiki/Document_Object_Model一个带有几个随机HTML标签的文本文档仍然是一个文本文档。 – Calvin 2009-04-11 15:15:50

我想我找到了一个工作解决方案。首先，让我详细说明一下这个问题。

的问题是：Firefox的创建类似

[some wrapper] 
+---document 
    +---<html>[=documentElement] 
     +---<body> 
      +---<head/> 
      +---<pre> 
       +---[actual plain text contents]

但封装的文档对象不支持正确设置innerHTML。所以，基本的想法是，创建一个具有完全的innerHTML支持的新文档对象。下面是它如何工作的：

var setInnerHTML = function(el, string) { 
    if (typeof window.supportsInnerHTML == 'undefined') { 
     var testParent = document.createElement('div'); 
     testParent.innerHTML = '<br/>'; 
     window.supportsInnerHTML = (testParent.firstChild.nodeType == 1); 
    } 
    if (window.supportsInnerHTML) { 
     el.innerHTML = string; 
    } else { 
     if (!window.cleanDocumentObject) { 
      /* this is where we get a 'clean' document object */ 
      var f = document.createElement('iframe'); 
      f.style.setProperty('display', 'none', 'important'); 
      f.src = 'data:text/html,<!DOCTYPE html><html><title></title></html>'; 
      document.body.appendChild(f); /* <- this is where FF creates f.contentDocument */ 
      window.cleanDocumentObject = f.contentDocument; 
      document.body.removeChild(f); 
     } 

     /* let browser do the parsing */ 
     var div = window.cleanDocumentObject.createElement('div'); 
     div.innerHTML = string; /* this does work */ 

     /* copy childNodes */ 
     while(el.firstChild) { 
      el.removeChild(el.firstChild); /* cleanup */ 
     } 
     for (var i = 0; i < div.childNodes.length; i++) { 
      el.appendChild(div.childNodes[i].cloneNode(true)); 
     } 
     delete div; 
    } 
}

编辑：

这个版本是更好更快;使用XSLTProcessor而不是iFrame。

var setInnerHTML = function(el, string) { 
    // element.innerHTML does not work on plain text files in FF; this restriction is similar to 
    // http://groups.google.com/group/mozilla.dev.extensions/t/55662db3ea44a198 
    var self = arguments.callee; 
    if (typeof self.supportsInnerHTML == 'undefined') { 
     var testParent = document.createElement('div'); 
     testParent.innerHTML = '<p/>'; 
     self.supportsInnerHTML = (testParent.firstChild.nodeType == 1); 
    } 
    if (self.supportsInnerHTML) { 
     el.innerHTML = string; 
     return el; 
    } else if (typeof XSLTProcessor == 'undefined') { 
     return undefined; 
    } else { 
     if (typeof self.cleanDocument == 'undefined') 
      self.cleanDocument = createHTMLDocument(); 

     if (el.parentNode) { 
      var cleanEl = self.cleanDocument.importNode(el, false); 
      cleanEl.innerHTML = string; 
      el.parentNode.replaceChild(document.adoptNode(cleanEl), el); 
     } else { 
      var cleanEl = self.cleanDocument.adoptNode(el); 
      cleanEl.innerHTML = string; 
      el = document.adoptNode(cleanEl); 
     } 

     return el; 
    } 

    function createHTMLDocument() { 
     // Firefox does not support document.implementation.createHTMLDocument() 
     // cf. http://www.quirksmode.org/dom/w3c_html.html#t12 
     // the following is taken from http://gist.github.com/49453 
     var xmlDoc = document.implementation.createDocument('', 'fooblar', null); 
     var templ = '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">' 
       + '<xsl:output method="html"/><xsl:template match="/">' 
       + '<html><title/><body/></html>' 
       + '</xsl:template></xsl:stylesheet>'; 
     var proc = new XSLTProcessor(); 
     proc.importStylesheet(new DOMParser().parseFromString(templ,'text/xml')); 
     return proc.transformToDocument(xmlDoc); 
    } 
};

来源

2009-04-12 15:21:29 user123444555621

使用的GreaseMonkey

来源

2009-04-11 14:13:44

它是失败的，因为没有body - 即使你链接的文件只是一个没有正文的文本文件（也许你正在用萤火虫看它）。

要做的最好的事情将是正则表达式替换，因为你正在处理文本。

来源

2009-04-11 14:19:05

似乎在Firefox 3的一个文本文件，指定的任一节点行为的innerHTML，如果你是分配给的innerText（与“< HTML> <体> <预>”前缀）。

（由于在非XML/HTML文档的DOM脚本完全是不确定的，它肯定是在Firefox的权利这样做。这似乎是一个快速的黑客在HTML页面中显示的文本文件）

所以你不能在Firefox上使用innerHTML，但其他DOM方法的工作：

var span= createElement('span'); 
span.style.color= 'red'; 
span.appendChild(document.createTextNode(match));

来源

2009-04-11 16:17:10 bobince

对。事情是，为了得到这个工作，你需要一个解析器。 - 使用一个缓慢而笨重的JavaScript编写的文件（例如http://ejohn.org/blog/pure-javascript-html-parser/），或者找到一种方法让Firefox完成解析，我更喜欢 – user123444555621 2009-04-12 15:20:30

如何在Firefox的纯文本文件上使用innerHTML？

回答

相关问题