个人中心
gpt4 book ai didi

javascript - document.evaluate 评估 XSLT 在浏览器中生成的 HTML 上的 Xpath

转载 作者：行者123 更新时间：2023-12-03 02:44:40 24 4
gpt4 key购买 nike

我一直在制作一个简单的 XSLT 样式表，以便将 XML 日志转换为更易于阅读的 HTML 输出。早期阶段进展顺利，日志显示得很好。然而，我随后尝试实现搜索功能，并且我的目标是使用 Xpath 来实现此目的，因为与简单的文本搜索相比，它允许相当多的控制。

我编写的搜索功能如下，但我遇到了一些奇怪的行为。如果我直接使用浏览器打开 XML 文件并使用 XSLT 文件生成 HTML，则它不起作用。但是，如果我将生成的 HTML 从浏览器复制到文件中，搜索功能将完全按预期工作，并且我能够过滤输出。

searchScript.js

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 = "";
  }

}

我在下面重新创建了一个更简单的情况，它显示了相同的问题。应可搜索的农场动物列表。同样，如果我打开 XML 文件，则不起作用；如果我从浏览器中复制生成的 HTML，保存到文件并打开该文件，则起作用。

农场.xml

<?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>

搜索器.xsl

<?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>

结果 View .css

body {
  padding-top: 4.5rem;
}
.animaldata{
    display:none;
}
#searchBox{
    width:100%;
}

我使用的是最新的 Firefox，这纯粹是为了本地使用查看日志文件，所以我不需要任何服务器端解决方案。

我对网络开发不太熟悉，所以这可能是非常简单的事情。预先感谢您的帮助!

最佳答案

我建议删除 xmlns="http://www.w3.org/1999/xhtml"然后更改<xsl:output method="xml" indent="yes" encoding="UTF-8"/>至<xsl:output method="html" version="5" indent="yes" encoding="UTF-8" doctype-system="about:legacy-compat"/> 。这样，您的 XSLT 创建 HTML 输出而不是 XHTML，您可能会发现 XPath 可以工作，而我认为使用 XHTML Firefox 会要求您为要在 XPath 表达式中使用的 XHTML 命名空间设置前缀。

关于javascript - document.evaluate 评估 XSLT 在浏览器中生成的 HTML 上的 Xpath，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48149615/

24 4 0
文章推荐： javascript - 单击后如何隐藏或删除内联按钮？
文章推荐： vba - Excel VBA 中的 Like 运算符
文章推荐： cinnamon - 如何为自定义 nemo Action 添加键盘快捷键？
文章推荐： javascript - 从 Controller 调用 oData 扩展
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com