将Javascript应用于XSL [英] Applying Javascript to XSL
本文介绍了将Javascript应用于XSL的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我注意到如果我尝试通过java脚本将更改应用于XSL文件，它只影响XSL创建的最顶层节点。
Ive noticed if i try to apply changed to a XSL file through java script it only affects the top most node created by the XSL.
示例：
我想隐藏多个博客条目的所有评论。结果只有顶级博客条目会隐藏评论。
Example: I want to hide all the comments of multiple blog entries. Result only the top blog entry will hide the comments.
我想更改超级链接的文本。超链接文本只会在最顶层的节点中更改。
I want to change the text of a hyper link. The hyperlink text will only change in top most node.
如何让java脚本影响XSL文件创建的所有节点？
How can I get the java script to affect all nodes created by the XSL file?
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
这些变化在第一篇博客文章中是完美的。创建一个链接以显示和隐藏评论。但是没有其它工作。
The changes are perfect in the first blog entry. A link is created to show and hide the comments. But no where else is it working.
推荐答案
尝试使用generate-id（）为A和DIV标签使用唯一ID函数。
Try to use unique IDs for A and DIV tags by using generate-id() function.
XSLT中的一些变化：
Some changes in 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("',$unique-id,'")')"/>
<!-- 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功能：
Also you need to change JS functions:
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';
}
}
这篇关于将Javascript应用于XSL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
