Bootstrap 5页面加载触发toast无显示问题求助

代码问题点 #

• 错误使用document.querySelectorAll()获取元素：该方法返回的是匹配类名的元素集合，而非单个DOM节点，bootstrap.Toast构造函数要求传入单个Toast节点，单个Toast场景下应改为document.querySelector('.toast')，多Toast场景需遍历集合逐个初始化
• JS代码中存在冗余无效字符5，会触发语法错误，直接删除即可
• 未给Toast设置定位规则：默认Toast在普通文档流中渲染，容易被其他元素遮挡或者出现在视口外，建议加上固定定位样式放在视口易见位置
• 需确认已正确引入Bootstrap 5的CSS和JS依赖，Bootstrap组件功能依赖官方JS文件运行

修正后完整代码示例 #

<!-- 增加定位样式的Toast结构 -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 20px; right: 20px; z-index: 1050;">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<script>
window.onload = (event) => {
  let myAlert = document.querySelector('.toast');
  let bsAlert = new bootstrap.Toast(myAlert);
  bsAlert.show();
}
</script>

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