我们欢乐网

js将load xml xslt文件生成html

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   这个网站有我的联系方式

 

posted @ 2008-10-12 00:23  www.usjoyful.com  阅读(...)  评论(...编辑  收藏
我们欢乐网