我正在尝试创建一个跨浏览器的XSLT代码,该代码适用于所有版本的IE / Edge,FireFox和Chrome。
以下代码适用于IE,但不适用于firefox和chrome。 任何人都可以给我一个关于我做错的线索吗?
var XML_DOC = "../../xmlfiles/sample.xml";
var XSL_DOC = "../../xslfiles/sample.xsl";
function loadXMLDoc(){
var xmlObject;
var xmlDoc;
var xslDoc;
try //Internet Explorer
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xslDoc = new ActiveXObject('Microsoft.XMLDOM');
xslDoc.async = false;
xmlDoc.load(XML_DOC);
xslDoc.load(XSL_DOC);
xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.async = false;
xslDoc = document.implementation.createDocument("","",null);
xslDoc.async = false;
xmlDoc.load(XML_DOC);
xslDoc.load(XSL_DOC);
xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
}
catch(e)
{
try //Google Chrome
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
}
};
xhttp.open("GET", XML_DOC, true);
xhttp.send();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xslDoc = this.responseXML;
}
};
xhttp.open("GET", XSL_DOC, true);
xhttp.send();
xmlObject = xmlDoc.transformNode(xslDoc);
}
catch(e)
{
error=e.message;
}
}
}
return xmlObject;
}
这是示例。 xml 文件:
<?xml version="1.0" encoding="windows-1255"?>
<menu>
<entity id="02_01_00_00_00">
<description>chapter a</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_00_00">
<description>chapter a1</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_01_00">
<description>chapter a11</description>
<image>../images/plus.gif</image>
<imageOpen>../images/minus.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_00_0010</ref>
<contents>
<entity id="02_01_01_01_01">
<description>blue</description>
<image>../images/empty.gif</image>
<imageOpen>../images/empty.gif</imageOpen>
<ref>chap02/htm/s02_01_01_01_01_0010</ref>
</entity>
</contents>
</entity>
</contents>
</entity>
</contents>
</entity>
</menu>
这是示例。 xsl 文件:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">
<xsl:template match="menu">
<xsl:apply-templates select="entity"/>
</xsl:template>
<xsl:template match="entity">
<div onclick="window.event.cancelBubble = true;clickedMenuEntry(this);" onselectstart="return false" ondragstart="return false">
<xsl:attribute name="id">div<xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="image"><xsl:value-of select="image"/></xsl:attribute>
<xsl:attribute name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:attribute>
<xsl:attribute name="ref"><xsl:value-of select="ref"/></xsl:attribute>
<xsl:attribute name="open">false</xsl:attribute>
<xsl:attribute name="selected">true</xsl:attribute>
<xsl:attribute name="title"><xsl:value-of select="description"/></xsl:attribute>
<xsl:attribute name="STYLE">
padding-right: 7px;
cursor: hand;
<xsl:if expr="depth(this) > 2">
display: none;
</xsl:if></xsl:attribute>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" >
<img border="0">
<xsl:attribute name="id">img<xsl:value-of select="@id"/></xsl:attribute>
<xsl:attribute name="SRC"><xsl:value-of select="image"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="description"/></xsl:attribute>
</img>
</td>
<td valign="middle" nowrap="true" onmouseover="this.style.fontWeight='bold';" onmouseout="this.style.fontWeight='normal';">
<xsl:attribute name="STYLE">
padding-right: 7px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #0B467A;
</xsl:attribute>
<span onclick="clickedText();">
<xsl:value-of select="description"/>
</span>
</td>
</tr>
</table>
<xsl:apply-templates select="contents/entity"/>
</div>
</xsl:template>
</xsl:stylesheet>
假设创建一个索引菜单,用户可以在其中导航某种电子书。