如何使用javascript将xsl样式应用于html内部的嵌入式xml

时间:2013-11-29 03:14:48

标签: javascript html xml xslt

我有一个嵌入xml标签的html文件里面,这里我试图应用xslt样式写在另一个单独的文件(somefile.xsl)用javascript导入,我成功应用样式与外部xslt文件导入用javascript但它只在Internet Explorer中工作,其他浏览器无法应用样式..贝娄是我的HTML代码请看我的代码。我在哪里做错了?除了IE,没有其他浏览器似乎使用这些技术。

    <HTML>
    <HEAD>
    <TITLE>Sample XML with XSL</TITLE>
        <xml id="elx">
            <hello-world>  
            <greeter>An XSLT Programmer</greeter>   
            <greeting>Hello, World! </greeting>
           </hello-world>
       </xml>
   </HEAD>
   <BODY>
   <SCRIPT language = "javascript">
   if(window.ActiveXObject)
   {
    //IE
         alert("hi");
         var xslDoc = new ActiveXObject("Microsoft.XMLDOM");
         xslDoc.async = false;
         xslDoc.load("helloworld.xsl");
         document.write(elx.transformNode(xslDoc));
 }
 else if (document.implementation && document.implementation.createDocument)
{
  //For Other Browsers

          xsltProcessor=new XSLTProcessor();
          xsltProcessor.importStylesheet("helloworld.xsl");
          result = xsltProcessor.transformToDocument(elx);
          // here 'elx' is id of embedded xml in header.
          document.write(result);
 }

  </SCRIPT>
  </BODY>
  </HTML>

这是我的xsl(helloworld.xsl)文件,我试图用javascript导入并在html文件中添加样式到嵌入式xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
<xsl:output method="html" version="1.1" encoding="iso-8859-1" />
<xsl:template match="/hello-world">
    <HTML>
        <HEAD>
            <TITLE>
            </TITLE>
        </HEAD>
        <BODY>
            <H1>
                <xsl:value-of select="greeting"/>
            </H1>
            <xsl:apply-templates select="greeter"/>
        </BODY>
    </HTML>
</xsl:template>

在我的html文件中,我只得到该xml文件的id,通过使用该xml id我需要使用javascript应用样式。希望您了解我的问题,请尽快解决。

2 个答案:

答案 0 :(得分:1)

importStylesheet需要对象(不是url to file),你可以从domParser获取它

var domParser = new DOMParser();
xsltProcessor.importStylesheet( domParser.parseFromString(some_text_value, "text/xml") );

Firefox / Chorme的完全懒惰解决方案,如下面的代码

<HTML>
<HEAD>
<script id="elx" type="text/xml">
    <hello-world>  
        <greeter>An XSLT Programmer</greeter>   
        <greeting>Hello, World! </greeting>
   </hello-world>
</script>
<script id="stlsh" type="text/xml">
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" version="1.1" encoding="iso-8859-1" />
    <xsl:template match="/hello-world">
        <HTML>
            <BODY>
                <H1>
                    <xsl:value-of select="greeting"/>
                </H1>
                <xsl:apply-templates select="greeter"/>
            </BODY>
        </HTML>
    </xsl:template>
    </xsl:stylesheet>
</script>
</HEAD>
<BODY>
<SCRIPT language = "javascript">
    var domParser = new DOMParser();
    var xsltProcessor = new XSLTProcessor();

    xsltProcessor.importStylesheet( domParser.parseFromString(stlsh.innerHTML, "text/xml") );
    var result = xsltProcessor.transformToDocument( domParser.parseFromString(elx.innerHTML, "text/xml") );

    document.write(result.firstElementChild.innerHTML);
</SCRIPT>
</BODY>
</HTML>

如果您想使用外部文件,则需要使用responseText将stlsh.innerHTML / elx.innerHTML更改为XMLHttpRequest并将其放入domParser。

或者获取XMLHttpRequest responseXML.documentElement - 可能是,domParser不需要

答案 1 :(得分:0)

确定转到XSL教程是W3Schools:

http://www.w3schools.com/xsl/xsl_transformation.asp

但是在你的事业中我认为围绕你的“其他浏览器”的if语句是可疑的问题。

<yourCode>
else if (document.implementation && document.implementation.createDocument)
</yourCode>

可以在要检查的If语句中添加警报或控制台日志吗?还有为什么你会有第二个if语句呢?如果你有“IE代码”和“非IE”代码,为什么不把它放在别的?

注意:没有尝试过你的代码,它的感恩之夜,我有点累,但只是一些想法