Java スクリプトを使用して XSL ファイルに変更を適用しようとすると、XSL によって作成された最上位のノードにのみ影響することに気付きました。
例: 複数のブログ エントリのすべてのコメントを非表示にしたい。結果として、一番上のブログ エントリのみがコメントを非表示にします。
ハイパーリンクのテキストを変更したい。ハイパーリンク テキストは、最上位ノードでのみ変更されます。
XSL ファイルによって作成されたすべてのノードに影響を与える Java スクリプトを取得するにはどうすればよいですか?
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>
私が遊んでいる Web ページ: http://dl.dropbox.com/u/12914798/Project%202/index.html
変更は最初のブログエントリで完璧です。コメントを表示および非表示にするリンクが作成されます。しかし、それ以外の場所では機能していません。