Загрузка XML и XSL из переменных и преобразование в браузере

Question

Фрагмент кода ниже - минимальное повторение проблемы, с которой я столкнулся.Цель состоит в том, чтобы преобразовать XML через XSL и получить результат в переменную.

Произошла ошибка в закомментированной строке.Что я делаю не так?

Более общая картина заключается в том, что я хочу иметь возможность иметь URL-адрес XML-файла и URL-адрес XSL-файла как в браузере, так и для преобразования XML с помощьюXSL.У меня работает загрузка всех файлов с сервера, но я получаю эту ошибку и не могу найти понятный ответ в Google.XML-преобразование на клиенте, по-видимому, мало фокусировалось с 2014 года, поэтому мне интересно, есть ли более современный метод или плагин.

Я с радостью приму простой ответ JS, JQuery или плагин.

Я знаю, что этот минимальный пример не является кросс-браузерным (нет решения для разновидностей IE), но я должен сказать, что мне нужно кросс-браузерное решение в качестве окончательного ответа.

Наконец,Я знаю, что вы можете преобразовать на сервере, это не в спецификации.

Вот ошибка с консоли и подвох.

err = TypeError: Failed to execute 'importStylesheet 'on' XSLTProcessor ': параметр 1 не относится к типу' Node '.

error: {"message": "Uncaught TypeError: Не удалось выполнить' transformToFragment" для 'XSLTProcessor': параметр 1 не имеетвведите 'Node'. "," filename ":" https://stacksnippets.net/js", "lineno": 26, "colno": 32}

Вот код, вызывающий ошибку.

var xsltProcessor, resultDocument, xml, xsl;

var xml = '<?xml version="1.0" encoding="UTF-8"?><catalog><cd><title>Empire Burlesque</title></cd></catalog>';
var xsl = '<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/">  <h2>My CD Collection</h2>  <table border="1">    <tr bgcolor="#9acd32">      <th style="text-align:left">Title</th>      <th style="text-align:left">Artist</th>    </tr>    <xsl:for-each select="catalog/cd">    <tr>      <td><xsl:value-of select="title" /></td>    </tr>    </xsl:for-each>  </table></xsl:template></xsl:stylesheet>'


xsltProcessor = new XSLTProcessor();
try {
  xsltProcessor.importStylesheet(xsl);  // < error here !
} catch (error) {
  console.log('err=' + error);
}
resultDocument = xsltProcessor.transformToFragment(xml, document);

console.log(resultDocument);

Answer 1

Чтобы ответить на эту часть вашего вопроса:

Преобразование XML на клиенте, по-видимому, было мало сосредоточено примерно с 2014 года, так что мне интересно, есть ли более современный техника или плагин.

Я бы сказал, что с 2004 года производители браузеров уделяют ему мало внимания.

Но если вы хотите что-то более современное, есть Saxon-JS, который является чистой реализацией Javascript XSLT 3.0. Он не только поддерживает стандарт 3.0, он также имеет расширения, делающие его интерактивным, поэтому вы можете обрабатывать события пользовательского ввода непосредственно в своем коде XSLT. Подробности на http://www.saxonica.com/saxon-js/index.xml

Отказ от ответственности: Saxon-JS производится моей компанией, Saxonica.

Answer 2

Я нашел свой собственный ответ, поэтому пишу на тот случай, если он поможет кому-то еще в будущем.Ключом к решению является использование DomParser для анализа XML и XSL из его строковой формы в документы.

Вдохновение пришло от этого SO вопроса Временное решение для островков данных XML , которое привело к MDN-статье об использовании островков данных XML в Mozilla , где они объясняют обходной путь иони делают нечто подобное для загрузки HTML5 «блоков данных».

ПРИМЕЧАНИЕ. Если вы загляните в консоль разработчика, вы можете увидеть множество ошибок, связанных с исключениями DOM и перекрестным происхождением.Похоже, этот код неудобно работает с машиной с фрагментами SO, но если вы вставляете свой собственный html в виде блока скрипта, он прекрасно работает, создавая приятный «# document-фрагмент» в консоли.

var xsltProcessor, resultDocument, xml, xsl;

var xml = '<?xml version="1.0" encoding="UTF-8"?><catalog><cd><title>Empire Burlesque</title></cd></catalog>';
var xsl = '<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/">    <xsl:for-each select="catalog/cd">      <xsl:value-of select="title" />    </xsl:for-each></xsl:template></xsl:stylesheet>';

// Secret sauce start. 
var parser = new DOMParser();
var xsl_doc = parser.parseFromString(xsl, "application/xml");
var xml_doc = parser.parseFromString(xml, "application/xml");
// end of secret sauce.

xsltProcessor = new XSLTProcessor();
try {
  xsltProcessor.importStylesheet(xsl_doc);
} catch (error) {
  console.log('err=' + error);
}
resultDocument = xsltProcessor.transformToFragment(xml_doc, document);

console.log(resultDocument);