如何将Jinja变量传递至外部JS文件？

首先明确核心原因：内联<script>中的{{ var }}能生效，是因为整个HTML页面会经过Jinja模板引擎渲染，变量会被替换为实际值；但外部JS文件是浏览器单独向服务器请求的资源，服务器不会对它执行模板渲染，所以{{ var }}会被当作普通字符串处理，自然无法解析。

目前没有办法让外部JS文件直接被Jinja渲染（除非修改服务器配置把JS文件纳入模板处理范围，但这不是常规方案，还会引发缓存、性能等问题），不过可以通过以下几种直接传递变量的方式替代，无需调用额外函数变通：

方法1：通过全局window对象传递 #

这是最常用的方案，在HTML的内联脚本中将Jinja变量挂载到全局window对象，外部JS直接访问该全局变量即可。

示例代码 #

HTML部分：

<!-- 先挂载Jinja变量到全局 -->
<script>
  // 使用tojson过滤器确保变量格式正确（自动处理字符串引号、转义符、布尔/数字类型）
  window.userData = {{ current_user | tojson }};
</script>
<!-- 再引入外部JS -->
<script src="/static/js/script.js"></script>

外部JS文件（/static/js/script.js）：

// 直接访问全局变量
console.log(userData.username);
console.log(userData.isAdmin);

方法2：通过URL查询参数传递 #

适合传递简单的字符串、数字等基础类型变量，在引入外部JS时将变量作为查询参数拼在URL后，外部JS通过解析URL参数获取值。

示例代码 #

HTML部分：

<!-- 将Jinja变量作为查询参数拼入JS URL -->
<script src="/static/js/script.js?userId={{ user_id | urlencode }}"></script>

外部JS文件：

// 解析URL查询参数的工具函数
function getQueryParam(paramName) {
  const params = new URLSearchParams(document.currentScript.src.split('?')[1]);
  return params.get(paramName);
}

// 获取变量
const userId = getQueryParam('userId');
console.log(userId);

注意：此方法不适合传递复杂对象，受限于URL长度，且序列化复杂对象会增加复杂度。

方法3：通过DOM的data属性传递 #

将Jinja变量存储在HTML元素的data-*属性中，外部JS通过DOM API读取这些属性值，适合传递复杂对象。

示例代码 #

HTML部分：

<!-- 用隐藏元素存储变量，或者复用页面已有元素 -->
<div id="jinja-vars" style="display: none;" 
     data-product="{{ product_info | tojson }}"></div>

<script src="/static/js/script.js"></script>

外部JS文件：

// 获取存储变量的DOM元素
const varsEl = document.getElementById('jinja-vars');
// 读取data属性并解析为JSON对象
const product = JSON.parse(varsEl.dataset.product);

console.log(product.name);
console.log(product.price);

以上三种方案都属于直接传递变量的方式，无需额外的函数调用变通，能满足绝大多数场景的需求。

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