我有一个简单的一页网站与bootstrap 5设置使用Spring引导与thymeleaf。
在这个页面上，我想例如使用引导工具提示。问题是初始化工具提示的函数在引导脚本加载完成之前触发，因此会出现错误并且页面无法正确加载。
<head>
... // css and meta omitted for brevity
<script th:src="@{/js/bootstrap.bundle.min.js}" async="true"></script>
</head>
<body>
... // page content
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
我试图放置引导脚本
但是没有什么能阻止第二个脚本在第一个脚本完成加载之前触发。
我在这里阅读了超文本标记语言规范，但最后我不确定脚本的加载是否真的是问题所在。
有人有一个想法来明确防止这个错误吗？
终于解决了这个问题。
我把所有的javascript代码放在一个单独的js文件中。然后我在正文末尾的引导文件之后加载这个文件，一切正常。
<head>
... //css and meta
</head>
<body>
... // page content
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/myfunction.js}"></script>
</body>
