最近項目開發過程中導師讓我做個RSS訂閱的功能,經過幾番辛苦過後是終於可以了,但是令人很失望的是用IE6瀏覽的時候卻不像IE8裏面顯示的那樣,在IE6裏全部是xml代碼。最後終於是找到了最好的解決方案:通過xslt來將xml轉義成xhtml。轉入正題看如何轉義....
xml文件裏面的內容爲:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type=/"text/xsl/" href=/"RSS.xsl/"?>
<rss version="2.0">
<channel>
<title>福建省企業上市信息管理平臺</title>
<link>http://192.168.1.124</link>
<description>福建省企業上市信息管理平臺</description>
<copyright>Copyright@鑫信邁系統集成有限公司</copyright>
<item>
<title>首頁</title>
<link>http://192.168.1.124/HtmlDir/index.htm</link>
<description><![CDATA[福建省企業上市信息管理平臺:首頁]]></description>
<category>主頁菜單導航</category>
</item>
<item>
<title>信息動態</title>
<link>http://192.168.1.124/HtmlDir/Pages/NewsList.aspx</link>
<description><![CDATA[福建省企業上市信息管理平臺:信息動態]]></description>
<category>主頁菜單導航</category>
</item>
<item>
<title>政策法規</title>
<link>http://192.168.1.124/HtmlDir/Pages/Policy.aspx</link>
<description><![CDATA[福建省企業上市信息管理平臺:信息動態]]></description>
<category>主頁菜單導航</category>
</item>
<item>
<title>互動交流</title>
<link>http://192.168.1.124/HtmlDir/Pages/PublicMsg.aspx</link>
<description><![CDATA[福建省企業上市信息管理平臺:互動交流]]></description>
<category>主頁菜單導航</category>
</item>
<item>
<title>綜合分析</title>
<link>http://192.168.1.124/HtmlDir/Pages/FullAnalysis.aspx</link>
<description><![CDATA[福建省企業上市信息管理平臺:綜合分析]]></description>
<category>主頁菜單導航</category>
</item>
<item>
<title>企業數據庫</title>
<link>http://192.168.1.124/HtmlDir/Pages/EnterpriseHouse.aspx</link>
<description><![CDATA[福建省企業上市信息管理平臺:企業數據庫]]></description>
<category>主頁菜單導航</category>
</item>
<item>
<title>管理平臺</title>
<link>http://192.168.1.124/SubModule/Login.aspx</link>
<description><![CDATA[福建省企業上市信息管理平臺:管理平臺]]></description>
<category>主頁菜單導航</category>
</item>
</channel>
</rss>
在xml裏先要添加這句<?xml-stylesheet type=/"text/xsl/" href=/"RSS.xsl/"?> 這個是爲了告訴瀏覽器“我這個要轉義呢”於是瀏覽器就找到RSS.xsl文件來進行轉義了。
以下是RSS.xsl文件的代碼
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head runat="server">
<title>RSS</title>
<style type="text/css">
body
{
font-size:13px;
font-family:Arial;
}
#main
{
}
#content
{
float:left;
width:80%;
margin-left:15px;
}
#content ul
{
list-style-type:none;
padding:0;
margin-left:0;
}
# content ul li
{
padding:0;
margin:0;
}
.li_time
{
font-size:12px;
color:Gray;
margin-bottom:5px;
vertical-align:middle;
}
.li_hr
{
margin:0px;
padding:0;
}
.li_title
{
font-size:16px;
font-weight:bold;
color:Blue;
}
.li_title a
{
font-size:20px;
font-weight:bold;
color:#3165C6;
text-decoration:none;
}
.li_title a:hover
{
font-size:20px;
font-weight:bold;
color:#5E80FA;
}
.li_desc
{
margin-bottom:40px;
}
#menu
{
right:10px;
top:10px;
width:18%;
position:absolute;
}
#menu ul
{
list-style-type:none;
margin:0;
padding:0;
}
#title
{
width:80%;
background-color:#FFFFC6;
margin-left:15px;
margin-bottom:40px;
}
#title ul
{
list-style-type:none;
padding:0;
margin-left:10px;
}
#title ul li
{
margin-bottom:10px;
}
.myHr
{
color:#3165C6;
height:1px;
}
</style>
</head>
<body>
<div>
<div id="main">
<div id="title">
<ul>
<li class="li_title">
<a>
<xsl:attribute name="href">
<xsl:value-of select="rss/channel/link"/>
</xsl:attribute><xsl:value-of select="rss/channel/title"/>
</a>
</li>
</ul>
</div>
<div id="content">
<ul>
<xsl:for-each select="rss/channel/item">
<li class="li_title">
<a>
<xsl:attribute name="href">
<xsl:value-of select="link"/>
</xsl:attribute>
<xsl:value-of select="title"/>
</a>
</li>
<li class="li_hr">
<hr class="myHr" />
</li>
<li class="li_time">
<xsl:value-of select="pubDate"/>
<xsl:element name="IMG">
<xsl:attribute name="SRC">../images/arrow.jpg</xsl:attribute>
<xsl:attribute name="style">
cursor:pointer;
</xsl:attribute>
<xsl:attribute name="onclick">
javascript:window.location.href="<xsl:value-of select="link"/>";
</xsl:attribute>
</xsl:element>
</li>
<li class="li_desc">
<xsl:value-of select="description"/>
</li>
</xsl:for-each>
</ul>
</div>
<div id="menu">
<!--<ul>
<xsl:for-each select="rss/channel/item">
<xsl:sort select="category"/>
<li>
<xsl:value-of select="category"/>
</li>
</xsl:for-each>
</ul>-->
</div>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
這裏是一個模仿IE8 SS樣式的,至於IE8裏面的右側類別欄,想了好久找不到好的解決方案也就沒做了,其實也沒必要做。
這裏面有添加超鏈接的,也有添加圖片的,還有給圖片添加樣式,添加onclick的方法的代碼,感覺做完這個後收穫很多 自己mark下,以後肯定用得上。