Enable IE6 to open RSS without displaying code (XSLT learning)

Last Update:2018-12-05 Source: Internet

Author: User

Tags xsl xsl file xslt

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the recent project development process, the mentor asked me to make an RSS subscription function. After several hard work, I finally got it, however, it is disappointing that when using IE6 for browsing, it is not as shown in IE8, and IE6 contains all XML code. Finally, we finally found the best solution: using XSLT to convert XML into XHTML. Let's see how to escape ....

The content in the XML file is:

<? XML version = "1.0" encoding = "UTF-8"?>

<? XML-stylesheet type =/"text/XSL/" href =/"RSS. XSL/"?>
& Lt; RSS version = "2.0" & gt;
<Channel>
<Title> Fujian Provincial enterprise listing information management platform </title>
<Link> http: // 192.168.1.124 </link>
<Description> Fujian Provincial enterprise listing information management platform </description>
<Copyright> copyright @ xin Mai System Integration Co., Ltd. </Copyright>
<Item>
<Title> homepage </title>
<Link> http: // 192.168.1.124/htmldir/index.htm </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: homepage]> </description>
<Category> Home Page menu navigation </Category>
</Item>
<Item>
<Title> information dynamics </title>
<Link> http: // 192.168.1.124/htmldir/pages/newslist. aspx </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: information dynamics]> </description>
<Category> Home Page menu navigation </Category>
</Item>
<Item>
<Title> Policies and Regulations </title>
<Link> http: // 192.168.1.124/htmldir/pages/policy. aspx </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: information dynamics]> </description>
<Category> Home Page menu navigation </Category>
</Item>
<Item>
<Title> interactive communication </title>
<Link> http: // 192.168.1.124/htmldir/pages/publicmsg. aspx </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: interactive exchange]> </description>
<Category> Home Page menu navigation </Category>
</Item>
<Item>
<Title> comprehensive analysis </title>
<Link> http: // 192.168.1.124/htmldir/pages/fullanalysis. aspx </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: Comprehensive Analysis]> </description>
<Category> Home Page menu navigation </Category>
</Item>
<Item>
<Title> enterprise database </title>
<Link> http: // 192.168.1.124/htmldir/pages/performanisehouse. aspx </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: enterprise database]> </description>
<Category> Home Page menu navigation </Category>
</Item>
<Item>
<Title> Management Platform </title>
<Link> http: // 192.168.1.124/submodule/login. aspx </link>
<Description> <! [CDATA [Fujian Province enterprise listing information management platform: Management Platform]> </description>
<Category> Home Page menu navigation </Category>
</Item>

</Channel>

</RSS>

Add this sentence in XML first <? XML-stylesheet type =/"text/XSL/" href =/"RSS. XSL/"?> This is to tell the browser "I want to escape this", so the browser finds the RSS. XSL file to escape it.

The code for the RSS. XSL file is as follows:

<? 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
{
Font-size: 20px;
Font-weight: bold;
Color: # ipv5c6;
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: # ipv5c6;
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>
Here is a style that imitates IE8 ss. As for the category column on the Right of IE8, you can't find a good solution after thinking for a long time. In fact, there is no need to do it.

There are hyperlinks, images, and codes for adding styles and onclick to images. After this, I feel that I have gained a lot of marks and I will definitely use them in the future.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More