Связывание JavaScript/XSLT

JavaScript может запускать преобразования XSLT через объект XSLTProcessor. После создания экземпляра XSLTProcessor имеет метод XSLTProcessor.importStylesheet(), который принимает в качестве аргумента XSLT-стиль, который будет использоваться в преобразовании. Стиль необходимо передавать в виде XML-документа, что означает, что файл .xsl должен быть загружен на странице перед вызовом XSLTProcessor.importStylesheet(). Это можно сделать с помощью XMLHttpRequest или XMLDocument.load().

Рисунок 1: Создание экземпляра XSLTProcessor

  const xsltProcessor = new XSLTProcessor();

  // Load the xsl file using synchronous (third param is set to false) XMLHttpRequest
  const myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example.xsl", false);
  myXMLHTTPRequest.send(null);

  const xslRef = myXMLHTTPRequest.responseXML;

  // Finally import the .xsl
  xsltProcessor.importStylesheet(xslRef);

Для фактического преобразования XSLTProcessor требует XML-документ, который используется вместе с импортированным файлом XSL для получения конечного результата. XML-документ может быть отдельным XML-файлом, загруженным, как показано на рисунке 1, или он может быть частью существующей страницы. Для обработки части DOM страницы необходимо сначала создать XML-документ в памяти. Предполагая, что DOM для обработки содержится в элементе с id example, этот DOM можно «клонировать» с помощью метода Document.importNode() XML-документа в памяти. Document.importNode() позволяет передавать фрагмент DOM между документами, в данном случае из HTML-документа в XML-документ. Первый параметр ссылается на узел DOM для клонирования. Установив второй параметр в «true», вы также клонируете все потомки (глубокий клон). Затем скопированный DOM можно легко вставить в XML-документ, используя Node.appendChild(), как показано на рисунке 2.

Рисунок 2: Создание XML-документа на основе части DOM документа

  // Create a new XML document in memory
  const xmlRef = document.implementation.createDocument("", "", null);

  // We want to move a part of the DOM from an HTML document to an XML document.
  // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone
  const myNode = document.getElementById("example");
  const clonedNode = xmlRef.importNode(myNode, true);

  // Add the cloned DOM into the XML document
  xmlRef.appendChild(clonedNode);

После импорта стиля XSLTProcessor должен выполнить два метода для фактического преобразования, а именно XSLTProcessor.transformToDocument() и XSLTProcessor.transformToFragment(). XSLTProcessor.transformToDocument() возвращает полный XML-документ, в то время как XSLTProcessor.transformToFragment() возвращает фрагмент документа, который можно легко добавить в существующий документ. Оба принимают в качестве первого параметра XML-документ, который будет преобразован. XSLTProcessor.transformToFragment() требует второго параметра, а именно объекта документа, который будет владельцем сгенерированного фрагмента. Если сгенерированный фрагмент будет вставлен в текущий HTML-документ, достаточно передать документ.

Рисунок 2.1: Создание XML-документа из строки 'XML Soup'

Хотя вы можете использовать метод IE loadXML для загрузки строки, содержащей XML, для выполнения того же в Mozilla необходимо внести некоторые изменения и настройки. Вы должны использовать DomParser.no для создания любого документа, так как это обрабатывается DomParser.

const parser = new DOMParser();
const doc = parser.parseFromString(aStr, "text/xml");

Рисунок 3: Выполнение преобразования

  const fragment = xsltProcessor.transformToFragment(xmlRef, document);