うさのJavaScript講座 - Blog館 - | XMLとXSLTをくっつけるJavaScriptサンプル

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

前回おとどけした、XMLを読み込むサンプルに引き続き、今回はXSLTをAppendしてあげようではないか！というサンプルです。
え？＜?xml-stylesheet type="text/xsl" href="xsltファイル名"?＞をXMLに書けばいいからJavaScriptでやらなくってよい？そんな場合もあります。でも、XMLがどんなものでもいい場合や、XMLはどこかのコードで生成されていてスキーマしか分かっていない場合、XSLTを動的に切り替えたい場合なんかには役に立つかもしれません。
ということで、今回もIE6,7,Firefox2.0,Opera9.0で動作確認していますサンプルをお届けしますのでお楽しみくださいませ♪
なお、このサンプルは、このブログのRSSをXMLとしていますが、うさのJavaScript講座サンプル集12-サンプル5ではHTML/XML/XSLTセットでDLできます。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var xmlDocument, xslDocument;
var fileName = "index.xml";
var xsltFileName = "sample5.xslt";
var browserFlag = false;
//読み込みスタート
function ViewTitle()
{
	if (document.implementation.createDocument)
	{
		browserFlag = true;
		//XML
		xmlDocument = document.implementation.createDocument("", "sampleXML", null);
		xmlDocument.onload = loadXslt;
		xmlDocument.load(fileName);
	}
	else //IE
	{
		//XML
		xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
		xmlDocument.async = false;
		xmlDocument.load(fileName);
		//XSLT
		xslDocument = new ActiveXObject("Microsoft.XMLDOM");
		xslDocument.async = false;
		xslDocument.load(xsltFileName);
		appendXslt();		
	}
	
}
//IE以外の場合のXSLTのロード
function loadXslt()
{
	if (browserFlag)
	{
		xslDocument = document.implementation.createDocument("", "sampleXSLT", null);
		xslDocument.onload = appendXslt;
		xslDocument.load(xsltFileName);
	}
}
//XMLとXSLTをくっつける関数
function appendXslt()
{
	if (browserFlag)
	{
		xsltProc = new XSLTProcessor();
		xsltProc.importStylesheet(xslDocument);
		outString = xsltProc.transformToFragment(xmlDocument, document);
		//表示
		document.getElementById("xmlValues").appendChild(outString);
	}
	else //IE
	{
		outString = xmlDocument.transformNode(xslDocument);
		//表示
		document.getElementById("xmlValues").innerHTML = outString;
	}
}
//-->
</script>

XSLTはこちら↓

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:variable name="items" select="//*[local-name()='item']" />
  <xsl:template match="*">
    <html>
    <body>
        <xsl:choose>
          <xsl:when test="count($items)>0">
            <table border="1" width="100%">
              <tr>
                <td>タイトル
                </td>
                <td>リンク
                </td>
              </tr>
            <xsl:apply-templates select="$items" mode="item" />
            </table>
          </xsl:when>
        </xsl:choose>
    </body>
    </html>
</xsl:template>
<xsl:template match="*" mode="item">
    <xsl:variable name="item-title" select=".//*[local-name()='title']" />
    <xsl:variable name="item-link" select=".//*[local-name()='link']" />
  <tr>
       <xsl:if test="string-length($item-title)">
        <td>
          <xsl:value-of select="$item-title" />
        </td>
      </xsl:if>
	<xsl:if test="contains($item-link, 'http')">
        <td>
          <a href="{$item-link}">
            <xsl:value-of select="$item-link" />
          </a>
        </td>
      </xsl:if>
    </tr>
  </xsl:template>
</xsl:stylesheet>

comments

はじめまして！
この度ブログのランキングサイト『ニンキブログ』がオープンしましたので、お知らせに参りました。
『ニンキブログ』の特別なお友達紹介システムにより、あなたのブログが毎日トップページに表示され、どんどんランキングの順位が上がります。
もちろんPing送信機能、トラックバック機能を利用しておりますので、ブログの記事をアップしたと同時に、トップページのNew記事コーナーに紹介されます。
登録の早い方にビッグチャンスがございますので突然お邪魔させていただきました。

『ニンキブログ』はコミュニティーにトラックバックして頂く事で皆様のブログをつなげ、ブログへの訪問者に提供される情報のつながりを大切に考えております。
オープンしてまだ1ヶ月も経たない、出来立てほかほかの未熟なサイトですが、是非ご参加をご検討ください！

http://www.ninkiblog.com
ニンキブログ

ニンキブログ
2006年11月03日 22:22

comment form

(うさのJavaScript講座 - Blog館 - にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)

name:
e-mail:
URL:

comments: (HTMLタグは使用できません): コメントを入力してください

うさのJavaScript講座 - Blog館 -

このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪

Calendar

うさゾン [うさ+Amazon]

Links

Category Archives

Archives

XMLとXSLTをくっつけるJavaScriptサンプル

タグ:

trackbacks

comments

comment form

Recent Entries

Feed

Inside
うさのJavaScript講座

Powered by

copyright (c) ＠うさ

うさのJavaScript講座 - Blog館 -

このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪

Calendar

Search

うさゾン [うさ+Amazon]

Links

Category Archives

Archives

XMLとXSLTをくっつけるJavaScriptサンプル

タグ:

trackbacks

comments

comment form

Recent Entries

Feed

Inside うさのJavaScript講座

Powered by

copyright (c) ＠うさ

Inside
うさのJavaScript講座