如何在Thymeleaf公共头部片段中引入JS脚本无需每页重复引用

问题原因 #

你当前使用th:replace="global/header :: header"引入片段时，只会替换匹配th:fragment="header"的<header>标签内部内容，你将header.js的引用写在了</header>标签之外，这部分内容不属于你定义的header片段，自然不会被引入到子页面，因此点击按钮时找不到dropdown()函数，只能手动在每个子页面重复引入JS。

解决方案 #

方案1：调整header片段的包含范围（最简便） #

修改你的header.html，把需要引入的头部标签、对应JS都包在同一个fragment里即可：

<!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>
<!-- 将fragment定义移到th:block上，包含header标签和对应JS -->
<th:block th:fragment="header">
    <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>
</th:block>
</body>
</html>

调整后子页面不需要做任何修改，原来的th:replace="global/header :: header"会自动把header标签和JS一起引入，无需重复写JS引用。

方案2：使用布局继承（适合项目统一架构） #

如果你的项目所有页面都需要引入公共头部、底部、公共资源，可以定义一个全局母版页，把公共的CSS引用、header片段、公共JS引用、footer片段都定义在母版中，其他业务页面只需要继承母版，填充专属的内容区域即可，完全不需要每个页面单独处理公共资源的引入。

额外优化建议 #

可以把内联的th:onclick="dropdown()"去掉，改成在header.js中用事件委托绑定事件，避免函数作用域问题：

// header.js 中添加
$(document).on('click', '#profile-btn', function() {
  // 原来的dropdown函数逻辑写在这里
  $('#dropdown-menu').toggle();
})

同时要确保jQuery的引入位置在header.js之前，避免依赖报错。

内容的提问来源于stack exchange，提问作者Zhening_Max