1

与此问题相关，您可以使用 Saxon-JS 从在浏览器中运行的 XSL 2.0 转换调用 Javascript 函数。但我似乎无法调用 jQuery-UI 调用。我唯一的想法是，这可能是一个时间问题，jQuery 选择器找不到目标对象的 ID，因为 Saxon-JS 尚未将其渲染到 DOM。

我的简单测试如下...

XML...

<?xml version="1.0" encoding="UTF-8"?>
<data>
    <date month="7" day="17" year="2017"/>
</data>

XSL...

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
    xmlns:js="http://saxonica.com/ns/globalJS"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">
        <xsl:result-document href="#header">
            <hr/>
        </xsl:result-document>
        <xsl:result-document href="#editor">
            <table border="1">
                <tr bgcolor="#999999">
                    <th colspan="2">Form</th>
                </tr>
                <xsl:apply-templates select="data/date"/>
            </table>
        </xsl:result-document>
        <xsl:result-document href="#footer">
            <hr/>
        </xsl:result-document>
    </xsl:template>
    <xsl:template match="date">
        <tr>
            <td>Date:</td>
            <td>
                <xsl:variable name="currentValue"><xsl:value-of select="@month"/><xsl:text>/</xsl:text><xsl:value-of select="@day"/><xsl:text>/</xsl:text><xsl:value-of select="@year"/></xsl:variable>
                <xsl:value-of select="$currentValue"/>
                <br/>
                <input type="text" id="datepicker"/>

                <xsl:value-of select="js:initDP('#datepicker','7/17/2017')"/>

            </td>
        </tr>
    </xsl:template>
</xsl:stylesheet>

的HTML...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>XSLT-JS-UI</title>
        <link rel="stylesheet" type="text/css" href="js/jquery-ui.min.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/SaxonJS.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/test.js"></script>
    </head>
    <body>
    <div id="header"></div>
    <div id="editor"></div>
    <div id="footer"></div>
    <input type="text" id="testDP"/>
    <br/>
    <button onclick="initDP('#testDP','7/17/1961')">picker</button>
    </body>
</html>

Javascript...

//=====================================
function initDP(id,init)
    {
    $(id).datepicker();
    $(id).datepicker("setDate",init);
    } 
//=====================================
$(document).ready(function()
    {
    SaxonJS.transform({
        stylesheetLocation: "test.sef.xml",
        sourceLocation: "test.xml"
        });
    });
//=====================================

包括对initDP（初始化 jQuery 日期选择器）的 HTML 调用和对其的 XSL 调用。HTML 工作，XSL 默默地失败。

4

1 回答 1

1

似乎xsl:value-of在创建结果元素或至少将其插入文档之前评估了您的 Javascript 调用。

对我有用的是在script之后简单地放置一个结果元素input，动态创建 Javascript 代码：

<xsl:template match="date">
    <tr>
        <td>Date:</td>
        <td>
            <xsl:variable name="currentValue" select="string-join((@month, @day, @year), '/')"/>
            <xsl:value-of select="$currentValue"/>
            <br/>
            <input type="text" id="datepicker{position()}"/>

            <script xsl:expand-text="yes">initDP('#datepicker{position()}', '{$currentValue}')</script>

        </td>
    </tr>
</xsl:template>

通过文件系统和 HTTP 上的 Firefox 和 HTTP 上的 Chrome 成功测试（Chrome 默认情况下不对文件系统执行 XMLHttpRequest，因此文件系统上的 Saxon-JS 不起作用）。Edge 似乎没有执行 XSLT，并在 SaxonJS.min.js (1,11772) 中给出了两个“SCRIPT5022: XError: Misplaced or malformed XML”错误，IE 似乎执行了样式表，但似乎没有执行内联脚本. https://martin-honnen.github.io/xslt/2017/ui-test1.html上的在线示例。

我现在还使用 Firefox、Chrome 和 Internet Explorer成功测试了一种不同的方法（ https://martin-honnen.github.io/xslt/2017/ui-test2.xslscript ），而不是使用内联结果元素ixsl:schedule-action来调用然后使用的模板js:initDP：

<xsl:template match="date">
    <tr>
        <td>Date:</td>
        <td>
            <xsl:variable name="currentValue" select="string-join((@month, @day, @year), '/')"/>
            <xsl:value-of select="$currentValue"/>
            <br/>
            <input type="text" id="datepicker{position()}"/>
            <ixsl:schedule-action wait="1">
                <xsl:call-template name="init-datepicker">
                    <xsl:with-param name="id" select="'#datepicker' || position()"/>
                    <xsl:with-param name="value" select="$currentValue"/>
                </xsl:call-template>
            </ixsl:schedule-action>                
        </td>
    </tr>
</xsl:template>

<xsl:template name="init-datepicker">
    <xsl:param name="id" as="xs:string"/>
    <xsl:param name="value" as="xs:string"/>
    <!--<xsl:sequence select="trace(js:initDP($id, $value), 'init-datepicker called for ' || $id || ' at ' || current-dateTime())"/>-->
    <xsl:sequence select="js:initDP($id, $value)"/>
</xsl:template>

Edge 问题似乎与 Saxon-JS 和 JQuery UI 交互的问题无关，而是似乎是由当前 Edge 版本的 Javascript 引擎中的错误引起的，请参阅https://github.com/Microsoft /ChakraCore/issues/3366，Saxon-JS 代码在检查放错位置的 XML 声明时遇到的问题。如果我删除 XML 输入和 Saxon 的 SEF 包文件中的 XML 声明，那么https://martin-honnen.github.io/xslt/2017/ui-test4.html在 Edge 以及 Saxon-JS 中都可以正常工作代码不会遇到 Edge Javascript 错误。

于 2017-07-15T09:14:31.810 回答