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

标签 javascript html xml xslt

我有一个 html 文件在里面嵌入了 xml 标签,我在这里尝试应用 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 应用样式。希望您能理解我的问题并尽快解决。

最佳答案

importStylesheet 需要对象(不是文件的 url),你可以从 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>

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

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

关于javascript - 如何使用 javascript 将 xsl 样式应用于 html 中的嵌入式 xml,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20277793/

相关文章:

html - 为什么背景有时显示有时不显示?

javascript - 如何将全局变量值从js文件中的函数传递到不同文件中的另一个函数

javascript - 组件重新渲染后 react 谷歌地图标记消失

javascript - 如何使用 phonegap 运行外部 php 脚本?

javascript - 超出最大调用堆栈

c++ - XML 文件中 Haar 级联正面人脸检测的特征向量大小是多少?

xml - 通过 TCP 传输数据的格式是什么?

javascript - 使用 cookie 仅显示一次叠加层

javascript - javascript的执行优先级是多少?

javascript - 绘制操作后通过 toDataURL 复制 Canvas 不起作用