如何将 javascript 脚本添加到 thymeleaf 片段

Question

我目前正在学习使用 thymeleaf 和 javascript。 我想创建一个标题，当点击用户的头像时，会显示一个下拉菜单。

我要解决的问题是当我将<script>标签添加到我的标题片段时，当我点击按钮时，控制台给我 ReferenceError，找不到函数。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
</head>
<body>
<header th:fragment="header" class="global-header">
<!--    Logged in show the user's avatar-->
    <div class="profile bulge-icon"  sec:authorize="isAuthenticated()">
        <button class="profile-btn" id="profile-btn" th:onclick="dropdown()">
            <img class="img" alt="user profile picture"  th:src="@{images/profile-placeholder.png}"/>
        </button>

        <div id = "dropdown-menu">
            <form th:action="@{/logout}" method="post">
                <button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button>
            </form>
        </div>
    </div>
</header>

<script type="text/javascript" th:src="@{/js/jquery/header.js}"></script>
</body>
</html>

为了使这个 js 工作，我需要将 .js 文件添加到使用标题片段的页面。 例如，我的 test.html。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/header.css}"/>
</head>
<body>
    <header th:replace="global/header :: header"></header>
    <script type="text/javascript" th:src="@{/js/jquery/header.js}"></script>
</body>
</html>

当<script>标签放入我的 header.html 时，是否有一种方法可以让 .js 工作。 所以这样一来，我就不需要在每一个使用header片段的页面中都添加header.js了。

Answer 1

当您使用th:replace ，Thymeleaf 会从字面上获取该<header>元素的内容并将其放置在您的主页中。 永远不会使用标题片段中的 JavaScript 行。

我通常处理这个问题的方法是使用Thymeleaf 布局方言，以便所有需要的脚本标签都包含在每个页面上。 有关如何使用它的信息，请参阅https://ultraq.github.io/thymeleaf-layout-dialect/ 。

例如，创建一个layout.html文件，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      lang="en">
<head>
    <meta charset="UTF-8">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/header.css}"/>

<div layout:fragment="page-content">
</div>

<script type="text/javascript" th:src="@{/js/jquery/header.js}"></script>
</head>

</html>

现在更新test.html以使用它：

<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout}">
<head>
    <title>Test</title>
</head>
<body>
<div layout:fragment="page-content">
    <header th:replace="global/header :: header"></header>
    <!-- Add more content for the test page here -->
</div>
</body>
</html>

如果标题应该在所有页面上，您也可以将其移动到layout.html 。

如何将 javascript 脚本添加到 thymeleaf 片段

问题描述

1 个解决方案

解决方案1
0 2021-11-05 07:35:13

如何将 javascript 脚本添加到 thymeleaf 片段

问题描述

1 个解决方案

解决方案1 0 2021-11-05 07:35:13

解决方案1
0 2021-11-05 07:35:13