Кроссбраузерное XSLT-преобразование в JavaScript

Вячеслав Гринин, October 25, 2009

Столкнулся я однажды с необходимостью отобразить XML-данные погодного информера gismeteo посредством XSLT-шаблона. Причем возникла острая необходимость сделать это через JavaScript, так как на предлагаемом бесплатном хостинге не было поддержки PHP, а значит отпарсить XML на сервере не представлялось возможным.

В результате этой острой необходимости родился код на JavaScript, который я и предлагаю на ваше рассмотрение.

function transformXslt(source,style) {
    if(window.ActiveXObject)
    {
        return source.transformNode(style);
    }
    else if(window.XSLTProcessor)
    {
        var xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(style);
        var resultDocument = xsltProcessor.transformToDocument(source);
        var xmls = new XMLSerializer();
        return xmls.serializeToString(resultDocument);
    }
    else
    {
        alert("Преобразование XML не поддерживается браузером");
        return null;
    }
}

Что мы здесь видим?

А видим мы здесь кроссбраузерное решение данной задачи. XSLT-преобразование в IE производится посредством метода transformNode XML-документа. Во всех остальных браузерах(FF, Chrome, Safari, Opera) XSLT-преобразование делается совсем по-другому. И делается оно посредством объекта XSLTProcessor, в который методом importStylesheet загружается файл стилей XSLT, а результирующий документ генерируется методом transformToDocument(xml). И напоследок мы поручим объекту XMLSerializer сгенерить строковое представление результирующего XML-документа.

И напоследок еще одна полезная, и такая же кроссбраузерная, функция, которая преобразует строковое представление XML (и XSLT)-документа собственно в сам документ, готовый для его дальнейшего использования.

function getXMLFromString(s) {
    if(window.ActiveXObject)
    {
        var xml;
        xml=new ActiveXObject("Microsoft.XMLDOM");
        xml.async=false;
        xml.loadXML(s);
        return xml;
    }
    else if(window.DOMParser)
    {
      var parser = new DOMParser();
      return parser.parseFromString(s,'text/xml');
    }
    else
    {
        alert("Загрузка XML не поддерживается браузером");
        return null;
    }
}

Этот код я собираюсь оставить без комментариев, так как в нем и так все понятно. :)

Скачать файл с этими функциями вы можете здесь

В тему:

11комментариев

Вообще, для красоты неплохо бы уметь передавать параметры в преобразование. Для Mozilla Safari Opera есть метод setParameter. А вот в IE такая вещь не пройдет. Без загрузки ActiveX (Template) установить параметр для xsl у меня не получилось. А у Вас?

ivanko, October 29, 2009 6:18 pm Reply

Гм… Приведите, пожалуйста, здесь пример кода, чтобы нам было что обсудить. Возможно, ответ на Ваш вопрос есть вот здесь http://javascript.ru/files/JavaScript.pdf

Вячеслав Гринин, October 29, 2009 7:20 pm Reply

У Вас в счетчика Google Page Rank неправильно отображается

Данила, February 18, 2010 3:50 pm Reply

А это бывает. Не страшно. Это, так сказать, по независящим от нас причинам.

admin, February 19, 2010 9:15 am Reply

>>Этот код я собираюсь оставить без комментариев, так как в нем и так все понятно.
И статья, похоже сама для себя написана. Пример вызова функции, или пример кода исполнения!?

transformXslt(“ex01-1.xml”,”ex01-1.xsl”)

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIXSLTProcessor.importStylesheet]” nsresult: “0×80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)” location: “JS frame :: file:///I:/XML/exam2.html :: transformXslt :: line 17″ data: no]

Line 17: xsltProcessor.importStylesheet(style);

Evgeny, February 27, 2010 2:04 pm Reply

Ага-ага. Для себя, наверное. Кстати, признаю свою вину – надо было в статье пример использования функция написать.
А комментировать в том куске кода и правда абсолютно нечего.
А к тому же в Вашем вызове transformXslt(”ex01-1.xml”,”ex01-1.xsl”) есть одна существенная ошибка(из-за меня допущенная) – в качестве параметров в эту функцию надо подавать не пути к файлам, а сами XML-документы (то есть объекты в памяти), уже загруженные в скрипт. Скоро дополню статью примерами использования. А если кратко – используйте функцию getXMLDocument из статьи “Парсинг XML в JavaScript на примере XML-погоды от gismeteo.ru“. То есть должно сработать вот так(проверьте): transformXslt(getXMLDocument(”ex01-1.xml”),getXMLDocument(”ex01-1.xsl”));

admin, February 27, 2010 3:23 pm Reply

Здравствуйте, в переменной resultDocument содержится документ – результат xslt-трансформации. В моем случае это html страница. Не подскажете, как сохранить resultDocument в файл .html?

Евгений, November 5, 2011 3:16 pm Reply

Прям-таки сохранить? На компьютер клиента не получится, не позволят настройки безопасности. Результат можно только вывести в браузер пред очи пользовательские… Если хотите делать слхранение результата, то делать надо преобразование не сервере и сохранять там же.

Вячеслав Гринин, November 7, 2011 5:22 pm Reply

У меня Chrome ругается на xml.send() в функции getXMLDocument(). Пишет:
Uncaught Error: NETWORK_ERR: XMLHttpRequest exception 101

Jack, November 6, 2011 10:39 am Reply

Возможно Вы пробуете сделать кросс-сайтовый запрос? То есть, загрузив приведенный скрипт на свой сайт, рытаетесь обратиться при его помощи к другому домену? Такие фокусы категорически запрещены настройками безопасности всех браузеров. Если есть необходимость юзать аяксом документы с других сайтов, то нужно либо использовать для этого flash, либо разместить на своем домене простой серверный загрузчик, который будет со сторонй сервера загружать документ с другого домена и передавать его клиентскому скрипту от своего имени.

Вячеслав Гринин, November 7, 2011 5:29 pm Reply

Еще где-то я читал, что помогает располагать загружаемый документ не в корне сайта,а в виртуальной директории. Но проверить это предположение прямо сейчас не могу.

Вячеслав Гринин, November 7, 2011 5:35 pm Reply
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: