js将load xml xslt文件生成html
2008-10-12 00:23
323 查看
jsshowhtmlfromxmlxslt.html:
<html>
<head>
<script>
function loadXMLDoc(fname)
{
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}
function introduction()
{
xmlspec=loadXMLDoc("1.xml");
xslspec=loadXMLDoc("1.xslt");
// code for IE
if (window.ActiveXObject)
{
ex=xmlspec.transformNode(xslspec);
document.getElementById("product_spec").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslspec);
resultDocument = xsltProcessor.transformToFragment(xmlspec,document);
fxshow=document.getElementById("product_spec");
divsecond=document.getElementById("divsecond");
divsecond.removeChild(fxshow);
fxshow=document.createElement("div");
fxshow.id="product_spec";
fxshow.appendChild(resultDocument);
divsecond.appendChild(fxshow);
}
}
</script>
</head>
<body>
<div id="divsecond" style="clear:both; width:420px;">
<div id="product_spec" ></div>
</div>
</body>
</html>
1.xml :
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet Type="text/xsl" href="1.xslt"?>
<product>
<product_name>Avanda MP4 N181 Digital Player</product_name>
<item>NO.A455-1028</item>
<price>$110.98</price>
<list_price>$120.98</list_price>
<you_save>$10.00</you_save>
<grade_rating>images/4-stars.gif</grade_rating>
</product>
1.xslt :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:user="anything here" >
<xsl:template match="/">
<html>
<head>
<style type="text/css">
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
.specials{ font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; text-align:left}
.apply{ font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:left}
</style>
</head>
<body topmargin="0">
<div id="center" style="width:420px;">
<div>
<table cellpadding="0" cellspacing="0" border="0"><tr ><td valign="middle" height="40" bgcolor="#f3f3f3" width="420" style="font-family:Arial, Helvetica, sans-serif; font-size:20px;" align="center"><xsl:value-of select="product/product_name"></xsl:value-of></td></tr></table>
</div>
<div style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left; margin-left:65px; margin-top:7px; margin-bottom:18px; font-weight: 500;">Item: <xsl:value-of select="product/item"></xsl:value-of></div>
<div style="margin-left:65px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:25px;">
<div style="float:left">Our Price:</div><div style="float:left; margin-left:23px; color:#d90000; font-weight:bold; letter-spacing:1.2px;"><xsl:value-of select="product/price"></xsl:value-of></div><br/>
<div style="float:left">List Price:</div><div style="float:left; margin-left:26px; font-weight:bold; color:#222222; letter-spacing:1.2px;"><xsl:value-of select="product/list_price"></xsl:value-of></div><br/>
<div style="float:left">Your Save:</div><div style="float:left; margin-left:23px; font-weight:bold; color:#222222; letter-spacing:1.2px;"><xsl:value-of select="product/you_save"></xsl:value-of></div><br/>
<div style="float:left; margin-top:15px;">Quantity:</div>
<div style="float:left; margin-left:30px; margin-top:15px;">
<select>
<option value="first" selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div style="clear:both">
<div style="float:left; margin-top:5px;">Grade:</div><div style="float:left; margin-left:23px; margin-top:10px;">
<xsl:variable name="pic"><xsl:value-of select="product/grade_rating" /></xsl:variable>
<img src="{$pic}" />
</div></div>
<div style="clear:both; text-align:left"><img src="images/Unigroup-web-design-product.2.7_16.gif"/></div>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
这三个文件放在同一目录下面。有问题请联系我。http://285694348.paipai.com 这个网站有我的联系方式
<html>
<head>
<script>
function loadXMLDoc(fname)
{
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}
function introduction()
{
xmlspec=loadXMLDoc("1.xml");
xslspec=loadXMLDoc("1.xslt");
// code for IE
if (window.ActiveXObject)
{
ex=xmlspec.transformNode(xslspec);
document.getElementById("product_spec").innerHTML=ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslspec);
resultDocument = xsltProcessor.transformToFragment(xmlspec,document);
fxshow=document.getElementById("product_spec");
divsecond=document.getElementById("divsecond");
divsecond.removeChild(fxshow);
fxshow=document.createElement("div");
fxshow.id="product_spec";
fxshow.appendChild(resultDocument);
divsecond.appendChild(fxshow);
}
}
</script>
</head>
<body>
<div id="divsecond" style="clear:both; width:420px;">
<div id="product_spec" ></div>
</div>
</body>
</html>
1.xml :
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet Type="text/xsl" href="1.xslt"?>
<product>
<product_name>Avanda MP4 N181 Digital Player</product_name>
<item>NO.A455-1028</item>
<price>$110.98</price>
<list_price>$120.98</list_price>
<you_save>$10.00</you_save>
<grade_rating>images/4-stars.gif</grade_rating>
</product>
1.xslt :
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:user="anything here" >
<xsl:template match="/">
<html>
<head>
<style type="text/css">
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
.specials{ font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; text-align:left}
.apply{ font-family:Arial, Helvetica, sans-serif; font-size:13px; text-align:left}
</style>
</head>
<body topmargin="0">
<div id="center" style="width:420px;">
<div>
<table cellpadding="0" cellspacing="0" border="0"><tr ><td valign="middle" height="40" bgcolor="#f3f3f3" width="420" style="font-family:Arial, Helvetica, sans-serif; font-size:20px;" align="center"><xsl:value-of select="product/product_name"></xsl:value-of></td></tr></table>
</div>
<div style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left; margin-left:65px; margin-top:7px; margin-bottom:18px; font-weight: 500;">Item: <xsl:value-of select="product/item"></xsl:value-of></div>
<div style="margin-left:65px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:25px;">
<div style="float:left">Our Price:</div><div style="float:left; margin-left:23px; color:#d90000; font-weight:bold; letter-spacing:1.2px;"><xsl:value-of select="product/price"></xsl:value-of></div><br/>
<div style="float:left">List Price:</div><div style="float:left; margin-left:26px; font-weight:bold; color:#222222; letter-spacing:1.2px;"><xsl:value-of select="product/list_price"></xsl:value-of></div><br/>
<div style="float:left">Your Save:</div><div style="float:left; margin-left:23px; font-weight:bold; color:#222222; letter-spacing:1.2px;"><xsl:value-of select="product/you_save"></xsl:value-of></div><br/>
<div style="float:left; margin-top:15px;">Quantity:</div>
<div style="float:left; margin-left:30px; margin-top:15px;">
<select>
<option value="first" selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div style="clear:both">
<div style="float:left; margin-top:5px;">Grade:</div><div style="float:left; margin-left:23px; margin-top:10px;">
<xsl:variable name="pic"><xsl:value-of select="product/grade_rating" /></xsl:variable>
<img src="{$pic}" />
</div></div>
<div style="clear:both; text-align:left"><img src="images/Unigroup-web-design-product.2.7_16.gif"/></div>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
这三个文件放在同一目录下面。有问题请联系我。http://285694348.paipai.com 这个网站有我的联系方式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用js 将 HTML 的 内容生成 xml 文件
- python将xml xsl文件生成html文件存储示例讲解
- Ant中批量调用TestNG的XML文件，并调用TestNgXlst生成漂亮的html测试报告
- ajax加载本地html文件出现 XMLHttpRequest cannot load的问题
- 遍历指定文件夹下所有的xml文件并动态生成HTML页面!
- Ant中批量调用TestNG的XML文件，并调用TestNgXlst生成漂亮的html测试报告
- itext xmlworker转换html生成pdf文件
- myeclipse取消xml,js,html等文件验证
- javaWEB项目中使用XSLT解析生成的XML文件
- 用XML和XSLT来生成静态的HTML页面
- Mvc下使用js在本地组合xml、xslt文件
- 遍历指定文件夹下所有的xml文件并动态生成HTML页面
- 【转载】用XML和XSLT来生成静态的HTML页面
- 遍历指定文件夹下所有的xml文件并动态生成HTML页面!
- .NET中XML 注释 SandCastle 帮助文件.hhp 使用HTML Help Workshop生成CHM文件
- C#中使用XSLT文件将XML文档转换为HTML
- python将xml xsl文件生成html文件存储示例讲解
- Ant中批量调用TestNG的XML文件，并调用TestNgXlst生成漂亮的html测试报告
- js生成xml文件及js读取xml文件，获得xml节点子节点的个数(同Extjs中树获得子结点个数)
- html中使用js加载xml文件