让IE6打开RSS不显示代码(xslt学习)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章