如何将Django模板语言变量传递至JavaScript文件

问题分析 #

你当前的写法无效，核心原因是Django输出的静态路径没有正确转义成合法的JS字符串，导致TEST变量未被正确定义。比如{{ test }}直接输出images/some_image.png时，JS会把它当成标识符而非字符串，引发语法错误，后续JS自然无法识别这个变量。

可行解决方案 #

1. 修正全局变量的定义（最简单的修复） #

在HTML的script标签里，给Django输出的内容加上引号，并使用escapejs过滤器处理特殊字符，避免语法错误和XSS风险：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 头部元信息与样式引用 -->
</head>
<body>
    <!-- 页面主体内容 -->
</body>
<script>
    // 用引号包裹路径，通过escapejs转义特殊字符
    const TEST = "{{ test|escapejs }}";
</script>
<script src="{% static 'setup.js' %}"></script>
<script src="{% static 'main.js' %}"></script>
</html>

这样TEST会被正确定义为字符串变量，后续setup.js里的函数就能正常访问它。

2. 用HTML data属性传递（更规范的方式） #

把静态路径存入HTML元素的data属性中，JS通过DOM读取，这种方式更符合前端规范，也更安全：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 头部元信息与样式引用 -->
</head>
<!-- 将静态路径存入body的data属性 -->
<body data-test-image="{% static 'images/some_image.png' %}">
    <!-- 页面主体内容 -->
</body>
<script src="{% static 'setup.js' %}"></script>
<script src="{% static 'main.js' %}"></script>
</html>

然后在setup.js中读取：

function add_misc_buttons() {
    // 从data属性获取静态路径
    const TEST = document.body.dataset.testImage;
    var btn_create_log = L.easyButton("<img src='" + TEST + "' style='width: 32px; height: 32px;'/>", function (btn, map) {
        console.log("TODO Send debug information to the developer");
        window.location.href = "mailto:admin@example.com?body=THIS%20IS%20A%20TEST";
    });
    // 其他按钮逻辑
}

3. 将JS文件作为Django模板处理（不推荐，仅作备选） #

如果需要在JS文件中直接使用Django模板标签，可以把JS文件重命名为setup.js.html，然后在HTML中用{% include %}引入：

<script>
{% include 'setup.js.html' %}
</script>

在setup.js.html里就可以直接用{% static %}标签：

function add_misc_buttons() {
    var btn_create_log = L.easyButton("<img src='{% static 'images/some_image.png' %}' style='width: 32px; height: 32px;'/>", function (btn, map) {
        console.log("TODO Send debug information to the developer");
        window.location.href = "mailto:admin@example.com?body=THIS%20IS%20A%20TEST";
    });
    // 其他按钮逻辑
}

注意：这种方式会让JS文件失去静态缓存的优势，且增加服务器渲染压力，仅适合特殊场景。

安全提醒 #

无论用哪种方式，都要避免直接输出未转义的用户数据，防止XSS攻击。使用escapejs过滤器或data属性的方式，能有效降低安全风险。

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