如何让iframe中的HTML文件正常解析Thymeleaf标签？

问题现象 #

使用Thymeleaf开发时，主页面index.html里的Thymeleaf标签能正常解析渲染，但iframe加载的子页面（比如minecraft.html）中的Thymeleaf标签完全没效果，直接以原始代码形式留在最终HTML里，不会被替换成动态内容。

相关代码 #

index.html（关键片段）

<div class="iframeContainer">
    <iframe th:src="@{categories/minecraft.html}" class="iframeTrueContainer" id="iframeTrueContainerId"></iframe>
</div>

<!-- 侧边栏按钮 -->
<a tabindex="0" class="categoriesBtn" onclick="changeIframe('categories/minecraft.html')">
    <img th:src="@{icons/minecraft.png}" alt="icon">Minecraft
</a>

minecraft.html（关键片段）

<div class="gridContent">
    <div class="gridItem" th:each="file : ${files}">
        <div><img src="@{file.iconpath}" alt="icon"></div>
        <div class="packNameDiv"><p class="packName" th:text="${file.name}"></p></div>
        <!-- 其他Thymeleaf标签 -->
    </div>
</div>

MainController.java（初始版本）

@Controller
public class MainController {
    UsersFilesController controller;

    @Autowired
    public MainController(UsersFilesController controller) {
        this.controller = controller;
    }

    @GetMapping("/")
    public String index(Model model){
        List<UsersFile> files = controller.getAll();
        model.addAttribute("files", files);
        return "/main/index";
    }

    @GetMapping("/categories/minecraft")
    public String minecraft(Model model){
        return "categories/minecraft";
    }
}

问题根源 #

iframe直接加载静态.html文件时，服务器只会把它当作普通静态资源返回，不会触发Thymeleaf的模板解析流程。只有通过Controller定义的请求映射访问页面，服务器才会调用Thymeleaf渲染动态内容。另外，初始的minecraftController方法没有往Model中传递files数据，就算页面被解析，子页面也拿不到动态数据。

修复步骤 #

1. 调整iframe和按钮的访问路径 #

把iframe的th:src改成Controller的请求映射路径，同时修改侧边栏按钮的changeIframe参数，去掉.html后缀：

<!-- 修改后的iframe -->
<div class="iframeContainer">
    <iframe th:src="@{/categories/minecraft}" class="iframeTrueContainer" id="iframeTrueContainerId"></iframe>
</div>

<!-- 修改后的侧边栏按钮 -->
<a tabindex="0" class="categoriesBtn" onclick="changeIframe('/categories/minecraft')">
    <img th:src="@{icons/minecraft.png}" alt="icon">Minecraft
</a>

2. 完善Controller方法，传递动态数据 #

在minecraft方法中添加数据传递逻辑，确保子页面能拿到files：

@GetMapping("/categories/minecraft")
public String minecraft(Model model){
    List<UsersFile> files = controller.getAll(); // 和主页面一致获取数据
    model.addAttribute("files", files);
    return "categories/minecraft";
}

3. 修正子页面的资源路径 #

子页面中的CSS、JS和图片路径要改用Thymeleaf的绝对路径语法，避免相对路径错误：

<!-- 修改后的子页面头部资源 -->
<link th:href="@{/style_main.css}" rel="stylesheet" type="text/css">
<script th:src="@{/jsc/gridItemChecker.js}"></script>

<!-- 修改后的图片路径 -->
<img th:src="@{${file.iconpath}}" alt="icon">

注意事项 #

• 所有需要Thymeleaf解析的页面，必须通过Controller请求映射访问，不能直接访问静态.html文件。
• 子页面要确保正确声明Thymeleaf命名空间：xmlns:th="http://www.thymeleaf.org"。

内容的提问来源于stack exchange，提问作者Александр Потапов