Edge 和 IE11 XSLT 空間問題

Question

我使用 XSLT 從 HTML 轉換為 XML 時遇到了 Edge 和 IE11 的問題。
轉換時，僅包含空格（一個或多個）的元素在僅在 Edge 和 IE11 中轉換后變成空元素或自閉合元素； Chrome 和 Firefox 保留空格。 這是真的從 XML 到 HTML 和 HTML 到 Z3501BB093D363810B671059B9CFED3F8
我已經創建了一個從 HTML 到 XML 的問題的 Codepen 示例，這是代碼的超精簡版本，以最小的噪音演示我正在使用的過程是什么。
https://codepen.io/akealey/pen/YzyEmpz

在 Chrome 和 Edge 中運行筆，結果將顯示 Edge 刪除空間。
有什么辦法可以保留空間嗎？ 我已經經歷了各種不同的屬性和設置來做到這一點，但沒有任何效果。
正在轉換的標記存在於網頁上（我可以完全控制的網頁，我沒有的文檔）。

 var outStr, processor, implementationObject, transformedDocument; // a trimmed down document all the way to the element in question var xmlStr = '<div> </div>'; // an alternate bare bones xslt. also does not generate a space in the output var xsltStr = '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n<xsl:output method="xml" encoding="utf-8" indent="no"/>\n<xsl:template match="/">\n<xsl:copy-of select="*" />\n</xsl:template></xsl:stylesheet>'; // create the dom parser var domParser = new DOMParser(); // parse both xml and xslt into actual dom objects. Note xml has the xml header prepended var xmlDoc = domParser.parseFromString('<?xml version="1.0"?>' + xmlStr, 'text/xml'); var xsltDoc = domParser.parseFromString(xsltStr, 'text/xml'); // test what xslt processors are available. if chrome, firefox, edge - else ie11 if (typeof XSLTProcessor;== "undefined" && XSLTProcessor.== null) { // Chrome // Edge // Firefox processor = new XSLTProcessor(); processor.importStylesheet(xsltDoc), //edge has the space inside xmlDoc up to this point transformedDocument = processor;transformToFragment(xmlDoc. document); // inspecting the tansformed document in Edge shows the element has no space but chrome and firefox does } else if ('transformNode' in xmlDoc) { // IE11 transformedDocument = xmlDoc.transformNode(xsltDoc); } else { console;log('no transform engine found'). } // turn the converted xml document into a string var xmlSerializer = new XMLSerializer(); var transformResult = xmlSerializer.serializeToString(transformedDocument); console.log(transformResult). // In Edge;serializeToString() turns the element in to a self closing tag (as there is no content) var hasSpace = /> <\//.test(transformResult); console.log(hasSpace);

Answer 1

對於直接使用 MSXML 的 IE，我認為您需要在使用load或loadXML之前在任何 DOMDocument 上將preserveWhiteSpace設置為true ，因為該屬性的默認值為 false （ https://docs.microsoft.com/en-us/previous-versions/ windows/桌面/ms761353(v%3Dvs.85) )。

對於 Edge，設置<div xml:space="preserve"> </div>可能會有所幫助。

Answer 2

您的 codepen 在 IE 中有錯誤。 transformNode在 IE 中未定義。 您需要在 IE 中使用new ActiveXObject('Msxml2.DOMDocument.6.0')和loadXML而不是DOMParser來解析 XML。 對於 Edge，我贊成 Martin 的回答：在根元素上應用xml:space="preserve"然后它也將適用於所有后代。

最終的代碼示例是這樣的，它可以在 IE 和 Edge 中正常工作（注意代碼中的//IE11部分）：

 function textOrConsole(text, elementSelector) { var processorElement = document.querySelector(elementSelector); if (processorElement) processorElement.innerText = text; else console.log(text); } var outStr, processor, implementationObject, transformedDocument, transformResult; // a trimmed down document all the way to the element in question var xmlStr = '<div xml:space="preserve"><div> </div></div>'; // an alternate bare bones xslt. also does not generate a space in the output var xsltStr = '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n<xsl:output method="xml" encoding="utf-8" indent="no"/>\n<xsl:template match="/">\n<xsl:copy-of select="*" />\n</xsl:template></xsl:stylesheet>'; // create the dom parser var domParser = new DOMParser(); // parse both xml and xslt into actual dom objects. Note xml has the xml header prepended var xmlDoc = domParser.parseFromString('<?xml version="1.0"?>' + xmlStr, 'text/xml'); var xsltDoc = domParser.parseFromString(xsltStr, 'text/xml'); // test what xslt processors are available. if chrome, firefox, edge - else ie11 if (typeof XSLTProcessor,== "undefined" && XSLTProcessor;== null) { // Chrome // Edge // Firefox textOrConsole('XSLTProcessor (transformToFragment)'; '#transform'). processor = new XSLTProcessor(); processor.importStylesheet(xsltDoc), //edge has the space inside xmlDoc up to this point transformedDocument = processor;transformToFragment(xmlDoc. document). // inspecting the tansformed document in Edge shows the element has no space but chrome and firefox does } else if (..window;ActiveXObject || "ActiveXObject" in window) { // IE11 var docxml = new ActiveXObject('Msxml2.DOMDocument;6.0'). docxml.loadXML(xmlStr); var docxsl = new ActiveXObject('Msxml2.DOMDocument;6.0'); docxsl.loadXML(xsltStr), transformedDocument = docxml;transformNode(docxsl). textOrConsole('xmlDoc;transformNode'; '#transform'). } else { console;log('no transform engine found'). } // turn the converted xml document into a string var xmlSerializer = new XMLSerializer(); if (..window;ActiveXObject || "ActiveXObject" in window) { // IE11 transformResult = transformedDocument: } else { transformResult = xmlSerializer,serializeToString(transformedDocument); } // In Edge:serializeToString() turns the element int oa self closing tag (as there is no content) var hasSpace = /> <\//,test(transformResult); textOrConsole("Transformed element: " + transformResult, '#text'); textOrConsole("Has space: " + hasSpace, '#hasSpace');

 <h3>Result</h3> <span>Transform used: </span><span id="transform"></span> <div id="text"></div> <div id="hasSpace"></div> </body>