XMLページをIEで表示させよう(初級編).......補足

2006年08月06日(日)更新

■XSLTを切り替えて表示内容を変えよう(補足: メニューで切り替える)

たけち: 前回のサンプルは、ボタンでXSLTスタイルシートを切り替えたけど、ここでは、補足としてメニューで切り替える方法を見ておくね。

さらら: あっ、そうなのね。

たけち: 動作の内容は前回といっしょだから説明は省くね。早速、JavaScriptを含んだhtmlテキストを見てみよう。

さらら: あっ、はい。
メニューでXSLTスタイルシートを切り替える

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="manyo.css" />
<title>
たのしいXML: XMLページをIEで表示させよう(初歩編)</title>


<script language="JavaScript">
<!--

	var objXML;
	var objXSLT;

	function init() {
		objXML = new ActiveXObject("microsoft.XMLDOM");
		objXML.async = false;

		objXML.load("manyo.xml");

		objXSLT = new ActiveXObject("microsoft.XMLDOM");
		objXSLT.async = false;


	}

	function change_xslt(OBJ,selectedIndex) {
		var xslt = OBJ.selection.options[selectedIndex].value;

		if (xslt=="") return;

		objXSLT.load(xslt);

		here.innerHTML = objXML.transformNode(objXSLT);
	}
-->
</script>

</head>

<body onLoad="init()">
<h3 align="center">XSLを<font color="navy"><strong>メニューで切り替えて</strong></font>表示の仕方を変えよう</h3>

<p align="center">
	<form name="menuform">
	<select name="selection" onChange="change_xslt(this.form,selectedIndex)">
		<option value="">
選択してください</option>
		<option value="manyo1.xsl">すべて表示</option>
		<option value="manyo2.xsl">一部を表示</option>
		<option value="manyo3.xsl">読みを表示</option>
	</select>
	</form>
</p>

<div id="here" align="center">manyo.xmlに指定したxslを適用した結果がここに表示されます。</div>

</body>
</html>

さらら: functionが二つあるけど・・・・・

たけち: 最初の、init()で、manyo.xmlファイルを読み込んでいるよ。

さらら: それって、いつ読み込まれるの?

たけち: htmlのbody部分を見てごらん。
<body onLoad="init()">
ってあるよね。これで、htmlを読み込むときに、init()が呼ばれるんだね。

さらら: そうなんだ。。。で、change_xslt(OBJ,selectedIndex)は、メニューを選択したときに呼ばれるのね。

たけち: そうそう。メニュー項目のvalue属性に、たとえば
value="manyo1.xsl"
のように、適用するXSLTスタイルシートファイル名を記述してあるよね。

さらら: うんうん。あとは、前回の処理と同じなのよね。

たけち: じゃあ、いつものように実際に見てもらえるようにリンクをつくっておくね。ボタンをクリックして楽しんでみて...

万葉集第1巻抜粋のXMLファイルをいろいろなxslで比較してみましょう(メニューで切替)

メニューで切り替えた例

さらら: なるほど、メニューを選択すると内容が切り替わって表示されるわ。

たけち: じゃぁ、今回はここまで。

さらら: うん。ありがと。 (*^ ^*)

注) JavaScriptそのものについてはここでは詳しく説明できませんが、なにとぞご容赦くださいませ。