javascript - 在 chrome/webkit 中使用 XSLT 转换 HTML 节点

Question

我想使用 XSL 样式表从 XHTML 页面转换 HTML 节点。

这是我使用的函数:

function XSLT(xml,xsl) {
        var tmpElt = document.createElement("div");

        if (window.ActiveXObject){
            //Version IE
            tmpElt.innerHTML = xml.transformNode(xsl);
        }else{
            //Version ECMA
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);
            var result = xsltProcessor.transformToFragment(xml, document);

            var serializer = new XMLSerializer();
            var str = serializer.serializeToString( result );

            tmpElt.innerHTML = str;
        }

        return tmpElt;
}

只要 xml 不是 HTMLElement，这将适用于 chrome。准确地说，这一行:

var result = xsltProcessor.transformToFragment(xml, document);

在 Chromium 上返回 null [大部分时间]。在 Firefox 上它表现正常。

---

我试过这个解决方法:

• 使用 outerHTML 序列化 xml(甚至使用 XMLSerializer::serializeToString() )
• 用新的 DOMParser() 解析它
• XSLT 结果

但不幸的是，outerHTML 和 innerHTML 不会生成正确的 XHTML，也不会呈现有效的 XML(它不会关闭像 <hr /> 这样的单个标签)。XMLSerializer 也不会关闭单个标签，这很令人惊讶对我来说。

---

我注意到当实际的 HTML 不包含任何自关闭标签时，HTML 节点转换将异常有效。所以我希望 Chrome 在 XSLT 之前使用 XMLSerializer 或 outerHTML 在内部序列化 HTML。

这是 JSFiddle:http://jsfiddle.net/eVbv7/

那么，我怎样才能在 Chrome 上使用 XSLT HTML 节点呢？我需要一种方法来正确序列化 XHTML 节点，或者任何解决方法都可以。

Answer 1

我再次思考这个问题，然后推测如果您只是创建一个虚拟 XML DOM 文档然后从 HTML DOM 文档导入节点元素，您是否可能不需要为 Chrome 或 Webkit 自定义克隆或序列化。所以我写了http://jsfiddle.net/5TNH9/事实上，Chrome 13 和 Safari 5.1 至少都执行了转换。因此，这可能是避免使用您自己的脚本代码完全实现序列化或克隆的另一种选择。

但是请注意，在 jsfiddle 上的那个测试用例中，Chrome 和 Safari 都出现了重复 br 元素的问题，而 Mozilla 或 Opera 不会出现这种情况。我目前无法判断这个问题是我选择的方法的普遍问题还是那个小测试用例特有的问题。