Gur*_*ngh 13 xml xslt google-chrome
我正在尝试使用Javascript转换XSLT并试图让它在Chrome和IE上运行.输入页面是a.html.它在IE中工作正常(原生/兼容模式)但在Chrome中无法正常工作,即下拉菜单不是通过选项创建的.
但是,在chrome中,如果我打开data.xml它有:
<?xml-stylesheet type="text/xsl" href="render.xslt" ?>
直接在铬,它转换完美.但是,如果我尝试使用XSLTProcessor来做同样的事情,它就不起作用了.具体来说,该document功能不起作用.能否请你帮忙？
我的代码如下.
使用Javascript:
var MSXML2_DOMDocument_6 = "MSXML2.DOMDocument.6.0";
function tranform(xml, xsl) {
if (window.ActiveXObject || "ActiveXObject" in window) {
var xmlSerializer = new XMLSerializer();
var xmlString = xmlSerializer.serializeToString(xml);
var xslString = xmlSerializer.serializeToString(xsl);
var xsl = new ActiveXObject(MSXML2_DOMDocument_6);
xsl.setProperty("AllowXsltScript", true);
xsl.setProperty("AllowDocumentFunction", true);
xsl.resolveExternals = true;
xsl.async = false;
xsl.loadXML(xslString);
var xml = new ActiveXObject(MSXML2_DOMDocument_6);
xml.resolveExternals = true;
xml.preserveWhiteSpace = true;
xml.async = false;
xml.loadXML(xmlString);
xml.resolveExternals = true;
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
} else if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
function loadXMLDoc() {
$.ajax({
method: "GET",
url: "data.xml",
dataType: "xml"
}).then(function (xml) {
console.log("done xml")
$.ajax({
method: "GET",
url: "render.xslt",
dataType: "xml"
}).then(function (xsl) {
console.log("done xsl")
tranform(xml, xsl)
})
},
function (e) {
console.log("Got error in xml", e.status)
})
}
$(loadXMLDoc)
富/ B.XML:
<dropdowns>
<dropdown name="xyz">
<option value="I">Info</option>
<option value="C">Category</option>
</dropdown>
</dropdowns>
data.xml中:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="render.xslt" ?>
<catalog name="xyz" />
a.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.3.1.js"></script>
<title>Document</title>
</head>
<body>
<div id="example"></div>
<script src="b.js"></script>
</body>
</html>
render.xslt:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:import href="util.xslt" />
<xsl:output method="html"></xsl:output>
<xsl:template match="/">
<h1>
<xsl:value-of select="/catalog/@name"></xsl:value-of>
</h1>
<xsl:call-template name="dropdown">
<xsl:with-param name="listname">xyz</xsl:with-param>
<xsl:with-param name="value" select="/catalog/@name"/>
</xsl:call-template>
</xsl:template>
</xsl:stylesheet>
util.xslt:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"></xsl:output>
<xsl:template name="dropdown">
<xsl:param name="listname"/>
<xsl:param name="value"/>
<select>
<xsl:for-each select="document('foo/b.xml')/dropdowns/dropdown[@name=$listname]/option">
<option>
<xsl:attribute name="value">
<xsl:value-of select="@value"/>
</xsl:attribute>
<xsl:value-of select="."/>
</option>
</xsl:for-each>
</select>
</xsl:template>
</xsl:stylesheet>
对不起,成为一个MVE示例有点长,但它已经完成了.
如果需要任何澄清,请告诉我.
我找到了解决此问题的方法[1] 。
在 Chrome 中，<xsl:import>在 Javascript 中转换时可以正常工作。因此，我将每个标签的XML 转换为<xsl:choose>XSL 。<xsl:when>dropdown
更新util.xslt：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"></xsl:output>
<xsl:template name="dropdown">
<xsl:param name="listname"/>
<xsl:param name="value"/>
<select>
<xsl:choose>
<xsl:when name="$listname='xyz'">
<option value="I">Info</option>
<option value="C">Category</option>
</xsl:when>
</xsl:choose>
</select>
</xsl:template>
</xsl:stylesheet>
1. 我同意这不是一个很好的解决方法，当然也不是一个通用的解决方法。如果有人有更好的解决方案，请将其发布为答案。
| 归档时间： |
|
| 查看次数： |
1137 次 |
| 最近记录： |