Javascript document.evaluate在浏览器中通过XSLT生成的HTML上计算Xpath
我一直在制作一个简单的XSLT样式表，以便将XML日志转换为更易于阅读的HTML输出。早期阶段进展顺利，日志显示良好。然而，我随后尝试实现一个搜索函数，我的目标是使用Xpath，因为与简单的文本搜索相比，它允许相当数量的控制 我写的搜索函数如下，但我遇到了一些奇怪的行为。如果我直接用浏览器打开XML文件，然后用XSLT文件生成HTML，那么它就不起作用了。但是，如果我将生成的HTML从浏览器复制到一个文件中，搜索功能将完全按照预期工作，并且我能够过滤输出 searchScript.jsJavascript document.evaluate在浏览器中通过XSLT生成的HTML上计算Xpath,javascript,xml,xslt,xpath,Javascript,Xml,Xslt,Xpath,我一直在制作一个简单的XSLT样式表，以便将XML日志转换为更易于阅读的HTML输出。早期阶段进展顺利，日志显示良好。然而，我随后尝试实现一个搜索函数，我的目标是使用Xpath，因为与简单的文本搜索相比，它允许相当数量的控制 我写的搜索函数如下，但我遇到了一些奇怪的行为。如果我直接用浏览器打开XML文件，然后用XSLT文件生成HTML，那么它就不起作用了。但是，如果我将生成的HTML从浏览器复制到一个文件中，搜索功能将完全按照预期工作，并且我能够过滤输出 searchScript.js func
function searchFunction()
{
var animals, animal, searchBox, filter;
searchBox = document.getElementById("searchBox");
animals = document.getElementsByClassName("animallist");
filter = searchBox.value;
//No idea why this only works on exported HTML not directly on styled XML...
var toShow, toHide;
var nsResolver = document.createNSResolver( animals[0].ownerDocument == null ? animals[0].documentElement : animals[0].ownerDocument.documentElement );
toShow = document.evaluate("//div[@class='animal']/div[@class='animaldata' and boolean(" + filter +")]/..", document, nsResolver, XPathResult. UNORDERED_NODE_SNAPSHOT_TYPE, null);
toHide = document.evaluate("//div[@class='animal']/div[@class='animaldata' and not(" + filter +")]/..", document, nsResolver, XPathResult. UNORDERED_NODE_SNAPSHOT_TYPE, null);
for(var i=0, len = toHide.snapshotLength; i < len; i++)
{
toHide.snapshotItem(i).style.display = "none";
}
for(var i=0, len = toShow.snapshotLength; i < len; i++)
{
toShow.snapshotItem(i).style.display = "";
}
}
我对web开发不太熟悉，所以这可能是非常简单的事情。提前感谢您的帮助 我建议删除xmlns=http://www.w3.org/1999/xhtml 然后换成。通过这种方式，XSLT将创建HTML输出，而不是XHTML，您可能会发现XPath是有效的，而我认为使用XHTML Firefox时，需要为XPath表达式中使用的XHTML命名空间设置前缀
<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="searcher.xsl"?>
<Farm>
<Animal>
<Name>Carl</Name>
<Status Age="3">Healthy</Status>
<Species>Pig</Species>
</Animal>
<Animal>
<Name>Bob</Name>
<Status Age="7">Healthy</Status>
<Species>Horse</Species>
</Animal>
<Animal>
<Name>Paul</Name>
<Status Age="15">Unwell</Status>
<Species>Donkey</Species>
</Animal>
<Animal>
<Name>Anne</Name>
<Status Age="1">Healthy</Status>
<Species>Hen</Species>
</Animal>
</Farm>
<?xml version="1.0"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/">
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>Farm Viewer</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384- Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"/>
<!-- Custom styles for this template -->
<link href="resultview.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Farm Viewer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria- expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<input class="form-control mr-sm-2" type="text" placeholder="XPath Search Query" aria-label="Search" id="searchBox"/>
<button class="btn btn-outline-success my-2 my-sm-0" onclick="searchFunction()">Search</button>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="jumbotron">
<h1>Farm Viewer</h1>
<p class="lead">
This viewer displays and allows searching of the XML Farm<br/>
<br/>
The search bar at the top enables complex searches and queries to be carried out using the Xpath language<br/>
For instance, in order to only display healthy animals, the simple query <i>.//Status='Healthy'</i> can be used.<br/>
</p>
</div>
<div class="animallist">
<xsl:for-each select="Farm/Animal">
<div class="animal">
<div class="animaldata">
<xsl:copy-of select="node()"/>
</div>
<h2><xsl:value-of select="Name"/> the <xsl:value-of select="Status/@Age"/>y.o. <xsl:value-of select="Species"/> is <xsl:value-of select="Status"/>.</h2>
</div>
</xsl:for-each>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384- ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384- a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!--Script to search the document-->
<script src="searchScript.js"></script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
body {
padding-top: 4.5rem;
}
.animaldata{
display:none;
}
#searchBox{
width:100%;
}