最近项目开发过程中导师让我做个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下,以后肯定用得上。