Question

我使用GIMP生成了调色板文件（xcp），我希望在网页上看到它们。为此，我创建了一个样式表转换文件（xsl）和一个简单的样式表（css）。

当我使用浏览器打开XCP调色板文件时，它会自动生成HTML文件。这是一个渲染：

我想要的是在一个页面中嵌入几个调色板文件。我尝试从jQuery中获取它们，但是我得到了一个我无法直接添加到页面的XMLDocument。

如何将转换后的html部分放入主html页面？

注意：请不要iframe

<小时/> 检查我的要点或看下面的代码： https://gist.github.com/sinsedrix/a14c131a3ef39ad79924eaa87accc434

XCP文件中的输出调色板：

<?xml version="1.0"?>
<?xml-stylesheet href="palette.xsl" type="text/xsl"?>
<Palette Name="Orange">
  <PaletteEntry Color="#F29400" Color2="#F29400" />
  <PaletteEntry Color="#F39F1A" Color2="#F39F1A" />
  <PaletteEntry Color="#F5A933" Color2="#F5A933" />
  <PaletteEntry Color="#F6B44D" Color2="#F6B44D" />
  <PaletteEntry Color="#F7BF66" Color2="#F7BF66" />
  <PaletteEntry Color="#F9C980" Color2="#F9C980" />
  <PaletteEntry Color="#FAD499" Color2="#FAD499" />
  <PaletteEntry Color="#FBDFB2" Color2="#FBDFB2" />
  <PaletteEntry Color="#FCEACC" Color2="#FCEACC" />
  <PaletteEntry Color="#FEF4E5" Color2="#FEF4E5" />
</Palette>

转换样式XSL文件：

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="Palette">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Palette "<xsl:value-of select="@Name" />"</title>
        <link rel="stylesheet" href="palette.css" type="text/css"/>
    </head>
    <body>
        <div class="palette">
            <xsl:apply-templates/>
        </div>
    </body>
</html>
</xsl:template>

<xsl:template match="PaletteEntry">
    <div class="palette-entry" style="background-color: {@Color}; border: 2px solid {@Color2};">
        <xsl:value-of select="@Color" />
        <br/>
        <xsl:value-of select="@Color2" />
    </div>
</xsl:template>

</xsl:stylesheet>

＆＃13;

$(function() {

    $.get('orange.xcp', function(data) {
      $('#palette1').append(data); // here data is an XMLDocument
    });

    $('#palette2').load('orange.xcp');
  });

＆＃13;

.palette-entry {
  width: 80px;
  margin: 2px;
  float: left;
  font: 14px Consolas;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="palette1"></div>
<div id="palette2"></div>

＆＃13;

Answer 1

我构建了一个没有任何javascript的解决方案，它只能在浏览器中使用XSLT，不需要额外的库。我们的想法是通过XSLT而不是jquery包含XCP文件。我假设一个像这样的基本HTML代码：

<?xml version="1.0"?>
<?xml-stylesheet href="palette.xsl" type="text/xsl"?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="palette.css" type="text/css"/>
    </head>
    <body>
        <h1>Hello world</h1>
        <p>Lorem ipsum ...</p>
        <div data-filename="palette.xcp" class="palette"/>
    </body>
</html>

第2行中指定的XSL如下所示：

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="node() | @*">
        <xsl:copy>
            <xsl:apply-templates select="node() | @*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="div[@class = 'palette']">
        <xsl:variable name="Palette" select="document(@data-filename)/Palette"/>
        <xsl:apply-templates select="$Palette"/>
    </xsl:template>

    <xsl:template match="Palette">
        <h2>Palette "<xsl:value-of select="@Name"/>"</h2>
        <div class="palette">
            <xsl:apply-templates/>
        </div>
    </xsl:template>

    <xsl:template match="PaletteEntry">
        <div class="palette-entry" style="background-color: {@Color}; border: 2px solid {@Color2};">
            <xsl:value-of select="@Color"/>
            <br/>
            <xsl:value-of select="@Color2"/>
        </div>
    </xsl:template>

</xsl:stylesheet>

这会为您的HTML执行完整的身份转换。在div分类＆＃34;调色板＆＃34;上，它包含palette.xcp中给出的文件中的数据，并根据您的脚本对其进行转换。 CSS和XCP文件与您的问题中给出的相同。

根据需要创建代码，不需要任何扩展名或iframe。

使用XSL将XML作为转换后的HTML嵌入到HTML页面中

1 个答案: