如何在外部JavaScript文件中访问Django模板变量？

方法1：将Django变量注入全局window对象（最直接） #

在你的Django模板（比如页面模板或base.html）里，在引入外部JS文件之前，添加内联script标签把变量挂载到window对象：

<!-- 模板文件中，外部JS引入前 -->
<script>
  // 直接输出Django变量，数字类型无需加引号
  window.is_empty = {{ is_empty }};
</script>
<!-- 引入你的外部JS文件 -->
<script src="{% static 'js/your-external-script.js' %}"></script>

然后在外部JS里直接使用：

if (window.is_empty === 1) {
  // 你的业务逻辑
}

为什么之前的写法失效？ #

你用var is_empty = "{{is_empty}}"会把数字包裹成字符串（渲染后为var is_empty = "1"），虽然后续Number()转换理论可行，但如果is_empty是布尔值（Django会渲染成"True"/"False"），或是模板渲染时带了多余空格，Number()转换后会得到NaN，导致判断失效。直接输出变量字面量就能避免这类问题。

方法2：修复data属性获取的null错误 #

你遇到的“无法对null调用getAttribute”，是因为JS代码执行时，目标div还没被浏览器解析渲染。有两种解决方式：

1. 把外部JS放在body标签末尾，确保DOM加载完成后再执行：

<body>
  <!-- 页面内容 -->
  <div id="temp" data-dj="{{ is_empty }}"></div>
  
  <!-- 外部JS放在body最后 -->
  <script src="{% static 'js/your-external-script.js' %}"></script>
</body>

2. 用DOM加载完成事件包裹代码：
   在外部JS文件里：

document.addEventListener('DOMContentLoaded', function() {
  const tempElement = document.getElementById('temp');
  // 用dataset获取data属性更简洁，同时转成数字
  const is_empty = parseInt(tempElement.dataset.dj, 10);
  
  if (is_empty === 1) {
    // 你的业务逻辑
  }
});

这样能保证代码在DOM完全加载后执行，不会出现找不到元素的情况。

内容的提问来源于stack exchange，提问作者dev-hd11