完全新手。提前致谢。开始了:
我正在尝试使用 XSL 样式表转换 XML 文档，并且 XSL 样式表链接到 CSS 文件。当我在浏览器 (Chrome) 中从我的计算机打开 XML 文件时，数据会在 XSL 和 CSS 文件之后正确显示。我在 XSL 样式表中也有 javascript 数学函数，用于从 XML 文件中获取元素并将其乘以不同的百分比。这个数学也有效。
但是当我尝试使用 Javascript(如下)在 HTML 中加载/转换 XML 文档时，XSL 样式出现了，但 CSS 关闭了。在 Chrome 中，CSS 显示的页面布局。但是字体太小，背景图片没有出现。无论我在 CSS 中进行什么更改，字体都非常小，几乎无法辨认。在 IE 中，CSS 根本不显示。
此外，Javascript 似乎隐藏了 xml 数据，我猜这对 SEO 不利。
有人有任何提示/不同的方法吗？我不能使用 ASP，因为我的网络服务器不允许，但其他任何东西都不允许。
这是我的 html 文档中的脚本:
<html>
<head>
<script>
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult() {
xml = loadXMLDoc("WORKS.xml");
xsl = loadXMLDoc("WORKS.xsl");
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
}
// code for Mozilla, Firefox, Opera,etc.
else if (document.implementation &&
document.implementation.createDocument) {
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
谢谢水桶。
艾伦
最佳答案
这实际上取决于 works.xml 和 works.xsl 的内容。建议:将 resultDocument 吐出到文本区域中，然后查看 html 是否正常。那时你还可以在 Chrome/IE 中保存=>加载 html resultDocument 并确保它看起来不错。
一旦您知道 html 中的内容导致了问题，就可以更轻松地找到原因并进行修复。
您可以通过添加以下内容来查看输出 html:
<textarea cols="255" rows="50" id="textarea1"></textarea>
在您的示例 div 标记下方。
和:
document.getElementById("textarea1").value = document.getElementById("example").innerHTML;
在 displayResult() 的末尾。查看输出。
请注意您的 xslt 是一个片段而不是整个 html 文档，它不应该包含 html/head/body 标签，并且看起来或多或少像下面这样:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<!--<html>
<head>-->
<link rel="stylesheet" href="galleryCSS.css" type="text/css" />
<!--</head>
<body>-->
<h2>Choosy Child Guaranteed BuyBack System</h2>
<ul class="gallery">
<xsl:for-each select="WORKS/item">
<li>
<a href="picture1.jpg">
<img src="picture1.jpg" alt="image" />
</a>
<em>
<xsl:value-of select="name"/>
</em>
<br />
Buy Price: <em>
$<xsl:value-of select="price"/>
</em>
<br />
1-4 Day BuyBack: <em>
$<script type="text/javascript">
x=<xsl:value-of select="price"/>*.15; document.write(Math.round(x*100)/100);
</script>
</em>
<br />
5-7 Day BuyBack: <em>
$<script type="text/javascript">
x=<xsl:value-of select="price"/>*.25; document.write(Math.round(x*100)/100);
</script>
</em>
<br />
8-14 Day BuyBack: <em>
$<script type="text/javascript">
x=<xsl:value-of select="price"/>*.40; document.write(Math.round(x*100)/100);
</script>
</em>
<br />
15-30 Day BuyBack: <em>
$<script type="text/javascript">
x=<xsl:value-of select="price"/>*.60; document.write(Math.round(x*100)/100);
</script>
</em>
<br />
30+ Day Buyback: <em>
$<script type="text/javascript">
x=<xsl:value-of select="price"/>*.75; document.write(Math.round(x*100)/100);
</script>
</em>
</li>
</xsl:for-each>
</ul>
<!--
</body>
</html>-->
</xsl:template>
</xsl:stylesheet>
还有其他方法可以缩短和简化代码并且不重复脚本标记，但这不在本问题的讨论范围之内。
关于javascript - 使用 XSLT 和 CSS 加载/转换 XML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1780803/