在XSLT中导入JS文件和Javascript

Import JS files and Javascript in XSLT

本文关键字：文件 Javascript JS 导入 XSLT      更新时间：2023-09-26

我有这个xsl文件：

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>
    <xsl:template match="/scenario">
        <html>
            <head>
                <script type="text/javascript" src="html5.js"> </script>
                <script type="text/javascript" src="jquery.min.js"> </script>
                <script type="text/javascript" src="jquery.details.js"> </script>
                <script type="text/javascript">
                    <xsl:text>
                    window.console || (window.console = { 'log': alert });
                    $(function() {
                        $('html').addClass($.fn.details.support ? 'details' : 'no-details');
                        $('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
                        $('details').details();
                        $('details').on({
                            'open.details': function() {
                                console.log('opened');
                            },
                            'close.details': function() {
                                console.log('closed');
                            }
                        });
                    });
                    </xsl:text>
                </script>
                <style type="text/css">
                    body {
                    font-size: 90%
                    }
                    .mainScenario {
                    padding : 10px;
                    border: 2px solid #002588;
                    }
                    .mainScnName {
                    font-weight: bold;
                    font-size: larger;
                    color : #6632ff;
                    }
                    .mainScnDesc {
                    font-weight: bold;
                    font-size: larger;
                    color : #3312aa;
                    }
                    .subScenario {
                    border: 2px solid #0032ff;
                    padding : 10px;
                    }
                    .subScnName {
                    font-weight: bold;
                    font-size: larger;
                    color : #6632ff;
                    }
                    .subScnDesc {
                    font-weight: bold;
                    font-size: larger;
                    color : #3312aa;
                    }
                    .command {
                    margin-left : 20px;
                    }
                </style>
            </head>
            <body>
                <div class="mainScenario">
                    <pre>
                        <b><xsl:value-of select="./greeting"/></b>
                        <details>
                            <summary class="mainScnName">Name: <xsl:value-of select="@name"/></summary>
                            <p class="mainScnDesc">Description: <xsl:value-of select="@description"/></p>
                            <xsl:for-each select="./*">
                                <xsl:apply-templates select="."/>
                            </xsl:for-each>
                        </details>
                    </pre>
                </div>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="scenario">
        <div class="subScenario">
            <b><xsl:value-of select="./greeting"/></b>
            <pre>
                <details>
                    <summary class="subScnName">Name: <xsl:value-of select="@name"/></summary>
                    <p class="subScnDesc">Description: <xsl:value-of select="@description"/></p>
                    <xsl:for-each select="./*">
                        <xsl:apply-templates select="."/>
                    </xsl:for-each>
                </details>
            </pre>
        </div>
    </xsl:template>
</xsl:stylesheet>

firefox中Javascript和JS文件导入部分的输出如下：

<script type="text/javascript" src="html5.js"><script type="text/javascript" src="jquery.min.js"/><script type="text/javascript" src="jquery.details.js"/><script type="text/javascript">
    window.console || (window.console = { 'log': alert });
    $(function() {
        $('html').addClass($.fn.details.support ? 'details' : 'no-details');
        $('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
        $('details').details();
        $('details').on({
            'open.details': function() {
                console.log('opened');
            },
            'close.details': function() {
                console.log('closed');
            }
        });
    });
</script>

我不知道为什么解析器假设所有标签都是第一个标签的子标签！！！

我应该提到的是，脚本试图在firefox和IE中启用details标记。我从这个url复制了它们。这个样品在我的电脑里可以用。

编辑1:

我已将线路<xsl:output method="html"/>更改为<xsl:output method="html" omit-xml-declaration="yes/>；但是它并不影响所呈现的HTML文件。其次，我在空的script标签之间添加了<xsl:comment/>；这个尝试呈现了我想要的标签：

<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.details.js"></script>
<script type="text/javascript">
    window.console || (window.console = { 'log': alert });
    $(function() {
        $('html').addClass($.fn.details.support ? 'details' : 'no-details');
        $('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
        $('details').details();
        $('details').on({
            'open.details': function() {
                console.log('opened');
            },
            'close.details': function() {
                console.log('closed');
            }
        });
    });
</script>

但现在还存在一个问题；脚本不起作用。

编辑2:

好吧，我终于做到了；寻址js文件时出现问题。我还在<head>标签中添加了一些样式，如下所示：

<style>
    summary { cursor: pointer; }
    .no-details details > * { display: none; }
    .no-details details > summary:before { float: left; width: 20px; content: '► '; }
    .no-details details.open > summary:before { content: '▼ '; }
    .no-details details summary { display: block; }
</style>

我在<head>之后的第一行中添加了<meta charset="utf-8"/>。箭头符号未显示在页面中。字符编码有什么问题吗？

编辑3:

我也试过<meta http-equiv="Content-Type" content="text/html; charset=utf-8">；一切都没有改变。

在HTML脚本中，标记不是自关闭的。尝试指定输出方法，我看到您已经这样做了，但您还需要省略xml声明：

<xsl:output method="html" omit-xml-declaration="yes"/>

这也意味着img标签等不是自封闭的，这应该是可以的

一个不太理想的解决方案是进行

<script src="..."><xsl:comment/></script>

但这会让你的HTML充斥着<!-- -->的评论。

也许解决方法很简单：

<script src="//whatever.com/script.js">&nbsp;</script>

编辑：

<script src="//whatever.com/script.js">&#160;</script>
相关文章：