Функция документа XSLT не работает в хроме

Я пытаюсь преобразовать XSLT с помощью Javascript и попытаться заставить его работать как с Chrome, так и с IE. Страница входа - a.html. Он отлично работает в IE (как в режиме "родной", так и в режиме совместимости), но не работает в Chrome правильно, т.е. выпадающий список не создается с помощью параметров.

В chrome, однако, если я открою data.xml который имеет:

<?xml-stylesheet type="text/xsl" href="render.xslt" ?>

прямо в хром, он отлично преображается. Но если я попытаюсь сделать то же самое с помощью XSLTProcessor, это не сработает. В частности, функция document не работает. Не могли бы вы помочь?

Мой код выглядит следующим образом.

Javascript:

var MSXML2_DOMDocument_6 = "MSXML2.DOMDocument.6.0";
function tranform(xml, xsl) {
    if (window.ActiveXObject || "ActiveXObject" in window) {
        var xmlSerializer = new XMLSerializer();
        var xmlString = xmlSerializer.serializeToString(xml);
        var xslString = xmlSerializer.serializeToString(xsl);

        var xsl = new ActiveXObject(MSXML2_DOMDocument_6);
        xsl.setProperty("AllowXsltScript", true);
        xsl.setProperty("AllowDocumentFunction", true);
        xsl.resolveExternals = true;
        xsl.async = false;
        xsl.loadXML(xslString);

        var xml = new ActiveXObject(MSXML2_DOMDocument_6);
        xml.resolveExternals = true;
        xml.preserveWhiteSpace = true;
        xml.async = false;
        xml.loadXML(xmlString);
        xml.resolveExternals = true;

        ex = xml.transformNode(xsl);
        document.getElementById("example").innerHTML = ex;
    } else if (document.implementation && document.implementation.createDocument) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("example").appendChild(resultDocument);
    }
}

function loadXMLDoc() {

    $.ajax({
        method: "GET",
        url: "data.xml",
        dataType: "xml"
    }).then(function (xml) {
            console.log("done xml")
            $.ajax({
                method: "GET",
                url: "render.xslt",
                dataType: "xml"
            }).then(function (xsl) {
                console.log("done xsl")
                tranform(xml, xsl)
            })
        },
        function (e) {
            console.log("Got error in xml", e.status)
        })
}

$(loadXMLDoc)

Foo/b.xml:

<dropdowns>
  <dropdown name="xyz">
    <option value="I">Info</option>
    <option value="C">Category</option>
  </dropdown>
</dropdowns>

data.xml:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="render.xslt" ?>
<catalog name="xyz" />

a.html:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery-3.3.1.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="example"></div>
    <script src="b.js"></script>
</body>

</html>

render.xslt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:import href="util.xslt" />
    <xsl:output method="html"></xsl:output>
    <xsl:template match="/">
        <h1>
            <xsl:value-of select="/catalog/@name"></xsl:value-of>
        </h1>
        <xsl:call-template name="dropdown">
            <xsl:with-param name="listname">xyz</xsl:with-param>
            <xsl:with-param name="value" select="/catalog/@name"/>
        </xsl:call-template>
    </xsl:template>
</xsl:stylesheet>

util.xslt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"></xsl:output>
    <xsl:template name="dropdown">
        <xsl:param name="listname"/>
        <xsl:param name="value"/>
        <select>
            <xsl:for-each select="document('foo/b.xml')/dropdowns/dropdown[@name=$listname]/option">
                <option>
                    <xsl:attribute name="value">
                        <xsl:value-of select="@value"/>
                    </xsl:attribute>
                    <xsl:value-of select="."/>
                </option>
            </xsl:for-each>
        </select>
    </xsl:template>
</xsl:stylesheet>

Мне жаль, что это немного, чтобы стать примером MVE, но он завершен.

Пожалуйста, дайте мне знать, если требуется какое-либо разъяснение.

Ответ 1

Это известная проблема и открыта с 2009 года. Также у команды Chrome нет никаких планов по ее исправлению, они планируют удалить ее из хрома (не уверен, когда). Но есть один способ обхода проблемы. преобразуйте ваши xml-данные в xslt, а затем вы можете импортировать их в таблицу стилей.

поэтому код javaScript останется таким же.

foo/b.xml станет foo/b.xslt

 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template name="dropdowns">
    <xsl:param name="listname"/>
    <xsl:param name="value"/>
    <xsl:choose>
        <xsl:when test="$listname='xyz'">
            <xsl:call-template name="option">
                <xsl:with-param name="value">I</xsl:with-param>
                <xsl:with-param name="label">Info</xsl:with-param>
                <xsl:with-param name="selectedValue" select="$value"/>
            </xsl:call-template>
            <xsl:call-template name="option">
                <xsl:with-param name="value">C</xsl:with-param>
                <xsl:with-param name="label">Category</xsl:with-param>
                <xsl:with-param name="selectedValue" select="$value"/>
            </xsl:call-template>
        </xsl:when>

    </xsl:choose>
 </xsl:template>

 <xsl:template name="option">
    <xsl:param name="label"/>
    <xsl:param name="value"/>
    <xsl:param name="selectedValue"/>
    <option value="{$value}">
        <xsl:if test="$value = $selectedValue">
            <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        <xsl:value-of select="$label"/>
    </option>
</xsl:template>
</xsl:stylesheet>

util.xslt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:import href="foo/b.xslt" />
<xsl:output method="html" />

<xsl:template name="dropdown">
    <xsl:param name="listname"/>
    <xsl:param name="value"/>
    <select>
        <xsl:call-template name="dropdowns">
            <xsl:with-param name="listname" select="$listname"/>
            <xsl:with-param name="value" select="$value"/>
        </xsl:call-template>
    </select>
</xsl:template>
</xsl:stylesheet>

render.xslt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:import href="util.xslt" />
<xsl:output method="html"></xsl:output>
<xsl:template match="/">
    <h1>
        <xsl:value-of select="/catalog/@name"></xsl:value-of>
    </h1>
    <xsl:call-template name="dropdown">
        <xsl:with-param name="listname">xyz</xsl:with-param>
        <xsl:with-param name="value">C</xsl:with-param>
    </xsl:call-template>
</xsl:template>
</xsl:stylesheet>

С помощью этих изменений вы можете создавать выпадающие списки на своей странице, которые будут работать как в IE, так и в Chrome.

Ответ 2

В общем, весь подход относится к вложенным шаблонам.
Здесь уже сказано: как перемещаться вложенной структуре XML с помощью шаблонов

Ниже приводятся некоторые вопросы и разъяснения относительно комментариев ниже вопроса.

Скорректировав локальный сервер, он поставляет файл util.xslt виде Content-Type text/css как ожидалось хром вместо application/xslt+xml, сценарии по-прежнему никогда не работают, как ожидалось. Поэтому должна быть еще одна проблема, связанная с хром.

enter image description here

Интересным моментом является наличие двух xslt-документов, в то время как один передается и принят хром с помощью application/xslt+xml а другой - только text/xml или text/xsl (да, оба приняты хром, я пробовал),

Поэтому интересная публикация о версиях xml/xslt может оказаться неприемлемой для этой проблемы.

Ниже приведены консольные сообщения:

enter image description here

Корректировка сервера выполняется со следующими строками, которые изменяют Content-Type (Content-Type mime), если запрашиваемое имя файла имеет суффикс xslt а ожидаемый тип mime - text/css:

<If "%{REQUEST_FILENAME} =~ m#\.xslt$# && %{HTTP:Accept} =~ m#^text\/css#">
    Header set "Content-Type" "text/css"
</If>

Fire Fox

Может быть, стоит отметить, что firefox полностью скрывает util.xslt на сетевой панели:

enter image description here

Кроме того, Firefox принимает оба метода: ActiveXObject и XSLTProcessor. В зависимости от логики в JavaScript по умолчанию устанавливается значение ActiveXObject, эта версия выглядит более гладко относительно анимации выпадающего списка.

Firefox жалуется, когда xml-версия установлена в 1.1, поэтому воспроизведение с номерами версий может не помочь увеличить совместимость с браузером.

Ответ 3

Я нашел обходное решение [1] для этой проблемы.

В chrome <xsl:import> корректно работает при преобразовании в Javascript. Итак, я преобразовал свой XML в XSL <xsl:choose> с <xsl:when> для каждого dropdown тега.

Обновить util.xslt:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"></xsl:output>
    <xsl:template name="dropdown">
        <xsl:param name="listname"/>
        <xsl:param name="value"/>
        <select>
            <xsl:choose>
                <xsl:when name="$listname='xyz'">
                    <option value="I">Info</option>
                    <option value="C">Category</option>
                </xsl:when>
            </xsl:choose>
        </select>
    </xsl:template>
</xsl:stylesheet>

1. Я согласен, что это не очень хороший способ обхода и, конечно, не обобщенный.Если у кого-то есть лучшее решение, отправьте его в качестве ответа.