使用JavaScript修改加载的XML（通过XSL显示在浏览器（Chrome）中）_Javascript_Xml_Xslt

使用JavaScript修改加载的XML（通过XSL显示在浏览器（Chrome）中）

javascript xml xslt

使用JavaScript修改加载的XML（通过XSL显示在浏览器（Chrome）中）,javascript,xml,xslt,Javascript,Xml,Xslt,我在Chrome浏览器控件（CefSharp.Wpf）中显示了以下XML文档：第一第二现在我想通过JavaScript（实时日志窗口）添加一个新的。甚至可以更改XML“live”吗？即使我删除了一个节点，浏览器也没有更新他的视图我不想在添加新条目时重新加载整个文档（需要约80毫秒）。我不想在浏览器中直接编写HTML，因为xsl模板部分存储为模板，可以更改欢迎提出任何其他想法！：）提前谢谢在现代浏览器中，您可以从Javascript重新运行转换。只需要访问原始XML文件请参见

我在Chrome浏览器控件（CefSharp.Wpf）中显示了以下XML文档：


第一
第二

现在我想通过JavaScript（实时日志窗口）添加一个新的

。甚至可以更改XML“live”吗？即使我删除了一个节点，浏览器也没有更新他的视图

我不想在添加新条目时重新加载整个文档（需要约80毫秒）。我不想在浏览器中直接编写HTML，因为xsl模板部分存储为模板，可以更改

欢迎提出任何其他想法！：）

提前谢谢

在现代浏览器中，您可以从Javascript重新运行转换。只需要访问原始XML文件

请参见以下HTML示例：

<!DOCTYPE html>
<html>
<head>
<script>

function sjax(url) {
    var req = new XMLHttpRequest();
    req.open("GET",url,false);
    req.send(null);
    return req.responseXML;
}

function transformBody(data, template) {

    while ((e = document.body.firstChild) !== null) {
        document.body.removeChild(e);
    }

    var processor = new XSLTProcessor();
    processor.importStylesheet(template);
    var resultFragment = processor.transformToFragment(data, document);
    document.body.appendChild(resultFragment);
}

var data = sjax("data.xml");
var xslt = sjax("template.xslt");

window.addEventListener("load", function (e) {
    transformBody(data, xslt);
}, false);

window.addEventListener("click", function (e) {
    data.documentElement.querySelector("log")
        .appendChild(data.createElement("entry"))
        .appendChild(data.createElement("message"))
        .appendChild(data.createTextNode("new node"));
    transformBody(data, xslt);
}, false);
</script>
</head>
<body>
</body>
</html>


函数sjax（url）{
var req=新的XMLHttpRequest（）；
请求打开（“GET”、url、false）；
请求发送（空）；
返回req.responseXML；
}
功能转换体（数据、模板）{
while（（e=document.body.firstChild）！==null）{
文件.body.removeChild（e）；
}
var processor=new XSLTProcessor（）；
processor.importStylesheet（模板）；
var resultFragment=processor.transformToFragment（数据、文档）；
document.body.appendChild（resultFragment）；
}
var data=sjax（“data.xml”）；
var xslt=sjax（“template.xslt”）；
window.addEventListener（“加载”，函数（e）{
transformBody（数据、xslt）；
}，假）；
window.addEventListener（“单击”，函数（e）{
data.documentElement.querySelector（“日志”）
.appendChild（data.createElement（“条目”））
.appendChild（data.createElement（“消息”））
.appendChild（data.createTextNode（“新节点”））；
transformBody（数据、xslt）；
}，假）；

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<data:data xmlns:data="x">
  <log>
   <entry>
    <message>first</message>
   </entry>
   <entry>
    <message>second</message>
   </entry>
  </log>
</data:data>


第一
第二

template.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:data="x" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="xsl:stylesheet">
  <xsl:apply-templates select="data:data" />
 </xsl:template>
 <xsl:template match="log">
  <html>
   <body>
    <xsl:for-each select="entry">
     <xsl:value-of select="message" /><br />
    </xsl:for-each>
</body>
  </html>
 </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:data="x" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="xsl:stylesheet">
  <xsl:apply-templates select="data:data" />
 </xsl:template>
 <xsl:template match="log">
  <html>
   <body>
    <xsl:for-each select="entry">
     <xsl:value-of select="message" /><br />
    </xsl:for-each>
</body>
  </html>
 </xsl:template>
</xsl:stylesheet>