我想我找到了一個工作解決方案。首先,讓我詳細說明一下這個問題。
的問題是: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);
}
};
DOM被設計爲使用HTML和XML。文本文件既不是。 http://en.wikipedia.org/wiki/Document_Object_Model一個帶有幾個隨機HTML標籤的文本文檔仍然是一個文本文檔。 – Calvin 2009-04-11 15:15:50