将Javascript应用于XSL

时间:2012-04-11 06:15:20

标签: javascript html xslt

我注意到如果我尝试通过java脚本将更改应用于XSL文件,它只会影响XSL创建的最顶层节点。

实施例: 我想隐藏多个博客条目的所有评论。结果只有顶级博客条目会隐藏评论。

我想更改超链接的文本。超链接文本只会在最顶层的节点中更改。

如何让java脚本影响XSL文件创建的所有节点?

HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" >
        <title>My Blog</title>

        <script> 

        function loadXMLDoc(fname)  
        {   

                var xmlDoc; 

                // code for IE
                if (window.ActiveXObject)
                {  
                    xmlDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");  
                }
                // code for Mozilla, Firefox, Opera, etc. 
                else if (document.implementation.createDocument) 
                { 
                    xmlDoc = document.implementation.createDocument("", "", null);  
                } 
                else 
                { 
                    alert('Your browser cannot handle this script'); 
                } 
                xmlDoc.async=false; 
                xmlDoc.load(fname); 
                return(xmlDoc); 
            }

            function loadEntries() 
            { 
                xmlDoc = loadXMLDoc("blogData.xml"); 
                xslDoc = loadXMLDoc("blogData.xsl"); 

                // for Firefox, Safari, etc.
                if (document.implementation.createDocument) 
                {
                    var xsltProcessor = new XSLTProcessor();
                    xsltProcessor.importStylesheet(xslDoc); 
                    xsltProcessor.setParameter(null, "id", 11);
                    var resultDocument = xsltProcessor.transformToFragment(xmlDoc,document);
                    document.getElementById("entries").appendChild(resultDocument);

                }
                // Internet Explorer
                else if (window.ActiveXObject) 
                {
                    var xslTemplate=new ActiveXObject("MSXML2.XSLTemplate");
                    xslTemplate.stylesheet=xslDoc;
                    var xslProc = xslTemplate.createProcessor();
                    xslProc.input = xmlDoc;
                    xslProc.addParameter("id", 11);
                    xslProc.transform();
                    document.getElementById("entries").innerHTML = xslProc.output;                  
                }

            }

            function displayResult()
            {
                var xml=loadXMLDoc("blogData.xml");
                var xsl=loadXMLDoc("blogData.xsl");
                // code for IE
                if (window.ActiveXObject)
                {
                    var ex = xml.transformNode(xsl);
                    document.getElementById("entries").innerHTML = ex;
                    document.getElementById("comments").style.display = 'none';
                    document.getElementById("hideShowLink").innerHTML = 'Show Comments';
                }
                // code for Mozilla, Firefox, Opera, etc.
                else if (document.implementation.createDocument)
                {
                    var xsltProcessor = new XSLTProcessor(); 
                    xsltProcessor.importStylesheet(xsl);
                    var resultDocument = xsltProcessor.transformToFragment(xml,document);
                    document.getElementById("entries").appendChild(resultDocument);
                    document.getElementById("comments").style.display = 'none';
                    document.getElementById("hideShowLink").innerHTML = 'Show Comments';
                }
            }

            function hideShow(){
                if(document.getElementById("comments").style.display == 'none'){
                    document.getElementById("comments").style.display = 'block';
                    document.getElementById("hideShowLink").innerHTML = 'Hide Comments';
                } else {
                    document.getElementById("comments").style.display = 'none';
                    document.getElementById("hideShowLink").innerHTML = 'Show Comments';
                }
            }

        </script>

    </head>

    <body onLoad="displayResult()">
        <table width="100%" border="0">
            <tr>
                <td colspan="2">
                    <div class="imgcentered">
                        <img src="banner.gif" alt="banner" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="entries">
                    </div>
                </td>
                <td class="rightside">
                    <div class="rightbody">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li>Archives</li>
                        <li>Profile
                        <br/>
                        <img src="pokemon.gif" alt="pokemin" width="40%"/><br/>
                        <br/>

                        <dl>
                            <dt><b>Name:</b></dt>
                                <dd>Ash Catchem</dd>
                            <dt><b>Age:</b></dt>
                                <dd>Old Enough</dd>
                            <dt><b>Birth Place:</b></dt>
                                <dd>Pallet Town</dd>
                            <dt><b>Current Residence:</b></dt>
                                <dd>Kanto</dd>
                            <dt><b>Occupation:</b></dt>
                                <dd>Pokemon Catcher</dd>
                        </dl>
                        </li>
                    </ul>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

XSL代码:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/">
        <html>

            <body>
                <div class="leftbody">
                    <!-- Loops Through all of the entries node in the XML and displays then in order by date descending order --> 
                    <xsl:for-each select="//entries">
                        <xsl:sort select="creationTime/@sort" order="descending" />
                        <p><xsl:value-of select="creationTime"/>[<a href="javascript:hideShow()"> <xsl:value-of select="count(comments)"/> Comments</a>]</p>
                        <h1><xsl:value-of select="title"/></h1>
                        <p><xsl:value-of select="description"/></p>
                        <br/>
                        <p><a href="javascript:hideShow()" id="hideShowLink" class="comments"></a></p>
                        <br/><hr/><br/>

                        <div id="comments" class="comments">
                        <h2>Comments:</h2>
                            <xsl:for-each select="//comments">
                                <p class="comments"><h3><xsl:value-of select="title"/></h3></p>
                                <p class="comments"><xsl:value-of select="description"/></p>
                                <p class="comments">-- <xsl:value-of select="creator"/></p>
                            </xsl:for-each>
                            <hr/>
                        </div>

                    </xsl:for-each>



                </div>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

网页我正在玩:http://dl.dropbox.com/u/12914798/Project%202/index.html

第一篇博文中的变化非常完美。创建一个链接以显示和隐藏评论。但没有其他地方可以工作。

2 个答案:

答案 0 :(得分:1)

尝试使用generate-id()函数为A和DIV标记使用唯一ID。

XSLT中的一些更改:

                <xsl:for-each select="//entries">
                    <xsl:sort select="creationTime/@sort" order="descending" />

                    <!-- define variables -->
                    <xsl:variable name="unique-id">
                        <xsl:choose>
                            <xsl:when test="position() = 1">
                                <xsl:value-of select="''"/>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:value-of select="generate-id(.)"/>
                            </xsl:otherwise>
                        </xsl:choose>
                    </xsl:variable>
                    <xsl:variable name="comments-id" select="concat('comments',$unique-id)"/>
                    <xsl:variable name="hideShowLink-id" select="concat('hideShowLink',$unique-id)"/>
                    <xsl:variable name="a-href" select="concat('javascript:hideShow(&#34;',$unique-id,'&#34;)')"/>

                    <!-- title and description -->
                    <p><xsl:value-of select="creationTime"/>[<xsl:element name="a"><xsl:attribute name="href"><xsl:value-of select="$a-href"/></xsl:attribute> <xsl:value-of select="count(comments)"/> Comments</xsl:element>]</p>
                    <h1><xsl:value-of select="title"/></h1>
                    <p><xsl:value-of select="description"/></p>
                    <br/>
                    <p>
                        <xsl:element name="a">
                            <xsl:attribute name="id"><xsl:value-of select="$hideShowLink-id"/></xsl:attribute>
                            <xsl:attribute name="href"><xsl:value-of select="$a-href"/></xsl:attribute>
                            <xsl:attribute name="class"><xsl:value-of select="'comments'"/></xsl:attribute>
                            Show Comments
                        </xsl:element>
                    </p>
                    <br/><hr/><br/>

                    <!-- comments -->
                    <xsl:element name="div">
                        <xsl:attribute name="id"><xsl:value-of select="$comments-id"/></xsl:attribute>
                        <xsl:attribute name="class"><xsl:value-of select="'comments'"/></xsl:attribute>
                        <xsl:attribute name="style"><xsl:value-of select="'display:none'"/></xsl:attribute>
                        <h2>Comments:</h2>
                        <xsl:for-each select="//comments">
                            <p class="comments"><h3><xsl:value-of select="title"/></h3></p>
                            <p class="comments"><xsl:value-of select="description"/></p>
                            <p class="comments">-- <xsl:value-of select="creator"/></p>
                        </xsl:for-each>
                        <hr/>
                    </xsl:element>

                </xsl:for-each>

您还需要更改JS功能:

        function displayResult()
        {
            var xml=loadXMLDoc("p100993_IR1.2_output_without_header_1.csv.xml");
            var xsl=loadXMLDoc("LoadVendorAnalytic.xsl");
            // code for IE
            if (window.ActiveXObject)
            {
                var ex = xml.transformNode(xsl);
                document.getElementById("entries").innerHTML = ex;
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation.createDocument)
            {
                var xsltProcessor = new XSLTProcessor(); 
                xsltProcessor.importStylesheet(xsl);
                var resultDocument = xsltProcessor.transformToFragment(xml,document);
                document.getElementById("entries").appendChild(resultDocument);
            }
        }

        function hideShow(id){
            if(document.getElementById("comments"+id).style.display == 'none'){
                document.getElementById("comments"+id).style.display = 'block';
                document.getElementById("hideShowLink"+id).innerHTML = 'Hide Comments';
            } else {
                document.getElementById("comments"+id).style.display = 'none';
                document.getElementById("hideShowLink"+id).innerHTML = 'Show Comments';
            }
        }

答案 1 :(得分:1)

我编写了自己的示例blogData.xml,我发现了问题:您希望为处理的每个单独的条目元素展开/折叠,但这需要单独的ID并将id传递给hideShow函数。试试这个:

function hideShow(commentsId){
    if(document.getElementById(commentsId).style.display == 'none'){
        document.getElementById(commentsId).style.display = 'block';
        document.getElementById("hideShowLink_" + commentsId).innerHTML = 'Hide Comments';
    } else {
        document.getElementById(commentsId).style.display = 'none';
        document.getElementById("hideShowLink_" + commentsId).innerHTML = 'Show Comments';
    }
}

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/">
        <html>

            <body>
                <div class="leftbody">
                    <!-- Loops Through all of the entries node in the XML and displays then in order by date descending order --> 
                    <xsl:for-each select="//entries">
                        <xsl:sort select="creationTime/@sort" order="descending" />
                        <xsl:variable name="commentsId">comments_<xsl:value-of select="creationTime/@sort"/></xsl:variable>

                        <p><xsl:value-of select="creationTime"/>
                            [
                            <xsl:element name="a">
                                <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="$commentsId"/>')</xsl:attribute>
                                <xsl:value-of select="count(comments)"/> Comments
                            </xsl:element>
                            ]
                        </p>
                        <h1><xsl:value-of select="title"/></h1>
                        <p><xsl:value-of select="description"/></p>
                        <br/>
                        <p>
                            <xsl:element name="a">
                                <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="$commentsId"/>')</xsl:attribute>
                                <xsl:attribute name="id">hideShowLink_<xsl:value-of select="$commentsId"/></xsl:attribute>
                                <xsl:attribute name="class">comments</xsl:attribute>
                            Hide Comments
                            </xsl:element>
                        </p>
                        <br/><hr/><br/>

                        <xsl:element name="div">
                        <xsl:attribute name="id"><xsl:value-of select="$commentsId"/></xsl:attribute>
                        <xsl:attribute name="class">comments</xsl:attribute>
                        <h2>Comments:</h2>
                            <xsl:for-each select="comments">
                                <p class="comments"><h3><xsl:value-of select="title"/></h3></p>
                                <p class="comments"><xsl:value-of select="description"/></p>
                                <p class="comments">-- <xsl:value-of select="creator"/></p>
                            </xsl:for-each>
                            <hr/>
                        </xsl:element>

                    </xsl:for-each>



                </div>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

请注意,我为所有元素diva提供了唯一ID。 请注意,我添加了“隐藏注释”作为按钮的起始值。如果您仍希望在加载时添加值,则必须遍历所有id =“hideShow_ *”元素。