使用 JavaScript 修改加载的 XML(通过 XSL 显示在浏览器 (Chrome) 中)
Modify loaded XML (displayed in Browser(Chrome) via XSL) with JavaScript
我在Chrome浏览器控件(CefSharp.Wpf)中显示了以下XML文档:
<?xml-stylesheet type="text/xsl" href="#"?>
<xsl:stylesheet version="1.0" xmlns:data="x" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<data:data>
<log>
<entry>
<message>first</message>
</entry>
<entry>
<message>second</message>
</entry>
</log>
</data:data>
<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>
现在我想通过JavaScript(实时日志窗口)添加新<entry>
。甚至可以"实时"更改XML吗?即使我删除了一个节点,浏览器也没有更新他的视图。
添加新条目时,我不想重新加载整个文档(需要~80ms)。我不想在浏览器中编写直接 HTML,因为 xsl-template 部分存储为模板并且可以更改。
欢迎任何其他想法! :)
提前感谢!
在现代浏览器中,您可以从 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>
数据.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>
相关文章:
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 在firefox和chrome中的左侧显示iframe滚动条
- Chrome(webkit?)无法在幻灯片中正确显示图像
- Firefox赢得了'不会显示我添加的jquery元素,但Chrome会显示
- 无法在Chrome(打包)应用程序上检测到ESC按钮(全屏显示时)
- Chrome和Firefox之间的Wordpress显示差异
- 向下滚动时隐藏菜单,向上滚动时显示,适用于Chrome,不适用于Safari(手机)
- Chrome 开发工具:如何计算加载弹出窗口并将其显示在页面上所需的总时间
- 在Chrome扩展程序中,是否可以截屏并在弹出窗口中显示屏幕
- 一系列下拉菜单,由jQuery提供支持,隐藏和显示,但不在Chrome中
- 显示chrome.storage中的所有内容
- 仅当标签页处于非活动状态时,才会显示 Chrome 桌面通知
- 未显示 Chrome 扩展程序浏览器操作
- 如何请求在popup.html中显示chrome扩展的清单版本号
- 如何选择性地显示Chrome扩展'的工具栏图标
- 超链接图像不显示Chrome扩展
- Ubermenu子菜单不显示Chrome/Safari
- Javascript:总是显示Chrome地址栏
- history.back()显示Chrome的问题