xml - 使用 Fetch API 包含使用 XSLT 转换的 XML 文件

Question

我有一个 xml 文件：

<?xml version="1.0" encoding="utf-8"?>                                                                     
<?xml-stylesheet href="trans.xsl" type="text/xsl"?>                                                                          
<profile>                                                                            
  <name>Leonard</name>                                                                            
  <age>99</age>                                                                             
</profile>                                                    

及其xslt转换文件：

<?xml version="1.0" encoding="utf-8"?>                                                                          
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>                                                                                                            
    <xsl:template match="profile"> 
        <form>            
            <xsl:for-each select="child::*">                                                                     
                <label>                                                                                     
                    <xsl:value-of select="name()"/>:                                                                
                    <input name="{name()}" type="text" />                                      
                </label>                                                                                                                          
                <br />                                                                                                                            
            </xsl:for-each>                                                                                                                       
        </form>                                                                                                                                   
    </xsl:template>                                                                                                                               
</xsl:stylesheet>        

如何使用 Fetch API 获取 DOM 中已经转换的内容？这个例子

fetch('ref.xml', {})                                                                                                                              
    .then(response => response.text())                                                                                                            
    .then(str => {                                                                                                                                
        (new window.DOMParser()).parseFromString(str, "text/xml")  
        const app = document.getElementById("content"); 
        app.innerHTML = str;                                                                                                                      
    })      

        

返回未转换的 XML。

PS：我想使用这种方法，因为显然 jQuery 不太受欢迎，HTML5 导入功能将来会被删除（它们在我的浏览器上不起作用），最后<object> <embed> <iframe>标签确实允许我继承 css 和访问内部标签。

标签： xmlxsltxslt-1.0fetch-api

Answer 1

您不仅限于 XSLT 1，还可以在浏览器中使用基于 Saxon-JS 2 的 XSLT 3：

const xml = `<?xml version="1.0" encoding="utf-8"?>                                                                     
<?xml-stylesheet href="trans.xsl" type="text/xsl"?>                                                                          
<profile>                                                                            
  <name>Leonard</name>                                                                            
  <age>99</age>                                                                             
</profile>`;

const xslt = `<?xml version="1.0" encoding="utf-8"?>                                                                          
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html"/>                                                                                                            
    <xsl:template match="profile"> 
        <form>            
            <xsl:for-each select="child::*">                                                                     
                <label>                                                                                     
                    <xsl:value-of select="name()"/>:                                                                
                    <input name="{name()}" type="text" />                                      
                </label>                                                                                                                          
                <br />                                                                                                                            
            </xsl:for-each>                                                                                                                       
        </form>                                                                                                                                   
    </xsl:template>                                                                                                                               
</xsl:stylesheet>`;

const transformationResult = SaxonJS.XPath.evaluate(`transform(
    map {
      'source-node' : parse-xml($xml),
      'stylesheet-text' : $xslt,
      'delivery-format': 'raw'
    }
  )?output`,
  [],
  { params : {
     xml : xml,
     xslt : xslt
  }}
);

const app = document.getElementById("content"); 
app.textContent = '';
app.appendChild(transformationResult);   

<script src="https://martin-honnen.github.io/xslt3fiddle/js/SaxonJS2.js"></script>

<div id="content"></div>

无需将 XSLT 预编译为 SEF/JSON，这与 XSLT 的动态编译同步工作，因此如果您知道 XSLT 将始终相同，它有助于通过 Node.jsxslt3工具（或 Saxon EE）运行它-export:trans.xsl.sef.json -nogo -xsl:trans.xsl，然后您甚至可以使用SaxonJS.transform( https://www.saxonica.com/saxon-js/documentation/index.html#!api/transform ) 异步运行 XSLT 转换。