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

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

jquery html css xml xslt

Jquery 使用XSL将XML作为转换后的HTML嵌入HTML页面,jquery,html,css,xml,xslt,Jquery,Html,Css,Xml,Xslt,我使用GIMP生成了调色板文件（xcp），我想在网页上看到它们。为此，我创建了一个样式表转换文件（xsl）和一个简单样式表（css）当我用浏览器打开XCP调色板文件时，它会自动生成一个HTML文件。下面是一个渲染：我想在一个页面中嵌入几个调色板文件。我试着从jQuery中获取它们，但是我得到了一个不能直接添加到页面中的XMLDocument 如何将转换后的html部分放入主html页面注意：请不要使用iFrame 查看我的要点或查看以下代码： XCP文件中的输出调色板： <?

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

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

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

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

注意：请不要使用iFrame

查看我的要点或查看以下代码：

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>

.palete条目{
宽度：80px；
保证金：2倍；
浮动：左；
字体：14px控制台；
文本对齐：居中；
}

我构建了一个没有任何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>

<?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>


你好，世界
同侧眼线

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

<?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>

<?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上，它包含palete.xcp中给定文件中的数据，并根据脚本进行转换。CSS和XCP文件与问题中给出的相同
这将根据需要创建代码，而不需要任何扩展或iFrame。
我的理解是：您希望在哪里进行转换？服务器端还是客户端？@friedemann_bach我更希望它是客户端，但我希望浏览器不需要额外的js库就能完成这项工作。iframe是唯一的解决方案吗？我倾向于说不，但我重新考虑了一下。请看下面我的答案。这似乎是个好主意。它还意味着有两个xsl文件，其中包含重复的代码，难道不能在全局选项板中包含/嵌入单个选项板吗？不，您只需要一个xsl。当然，调色板也包括在内，这就是我代码的全部要点。您试过了吗？我需要将每个调色板分别可视化并分组到一个页面上，这就是为什么我要考虑2个xsl文件。假期过后我会试试你的解决办法：-）我明白了。当然，如果有帮助的话，可以在一个XSL文件中包含来自另一个文件的XSL代码。但也许没有必要。您可以根据需要多次使用
，它将根据@filename
中给出的相应XCP，为每个div
生成一个单独的调色板可视化。