Django项目集成Bootoast实现消息提示时bootoast未定义报错求助

DevOps 小满

2026-11-6

报错根因与修正方案

核心触发问题

最直接的报错诱因：<script>标签的属性拼写错误，把JS引入的必备属性src错写成了srs。浏览器完全不会识别这个无效属性，根本不会发起bootoast的JS资源请求，全局自然不存在bootoast对象，这就是控制台报bootoast is not defined的根本原因。
潜在时序风险：如果bootoast的JS引入位置在自定义toast调用块的后方，即使拼写正确，也会因为脚本还没加载完就执行toast调用，触发同样的报错。
渲染隐患：直接把Django模板输出的消息内容嵌入JS字符串，一旦消息包含单引号、换行、特殊转义字符，会直接截断JS语法逻辑，引发连带报错。

逐段修正代码

修正资源引入配置

调整资源加载顺序，修正拼写错误，保证bootoast的脚本先于自定义逻辑加载：

<!-- 先加载bootoast样式 -->
<link rel="stylesheet" href="https://unpkg.com/bootoast@1.0.1/dist/bootoast.min.css">
<!-- 修正拼写错误，确保JS正常加载 -->
<script src="https://unpkg.com/bootoast@1.0.1/dist/bootoast.min.js"></script>

优化自定义toast函数

去掉对象字面量末尾的多余逗号，避免旧版JS引擎的解析兼容问题：

function toast(message, type) {
  bootoast.toast({
    position: 'bottom-center',
    message: message,
    type: type
  });
}

安全渲染Django消息

使用Django自带的escapejs过滤器转义特殊字符，同时绑定DOM加载完成事件再执行toast调用，彻底规避时序问题：

{% if messages %}
<script>
  // 等待DOM完全渲染后再触发提示
  document.addEventListener('DOMContentLoaded', function() {
    {% for message in messages %}
      toast(
        '{{ message|escapejs }}',
        '{{ message.tags|escapejs }}'
      )
    {% endfor %}
  })
</script>
{% endif %}