Django4中静态JavaScript无法工作的问题排查求助

问题信息 #

Django4项目中静态JavaScript无法正常触发，以下是相关代码与配置：

HTML代码 #

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
   <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap-grid.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap-reboot.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
    <!-- Own CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'news/css/base.css' %}" />
  </head>
  <body>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

  <!--First own js, then other js-->
  <script type="text/javascript" src="{% static 'news/js/base.js' %}"></script>
  <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
 </body>
</html>

项目目录结构 #

blog
--news
--template
--static
----bootstrap
------css
------js
----news
------css
--------base.css
------js
--------base.js
--media

Settings.py 配置 #

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

STATIC_URL = '/static/'
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
    STATIC_DIR,
]

urls.py 路由配置 #

urlpatterns += staticfiles_urlpatterns()
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

base.js 代码 #

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

排查与解决步骤 #

1. 验证静态文件加载状态
   打开浏览器开发者工具（F12）→「网络」标签，刷新页面：

   • 若base.js请求返回404，检查{% static 'news/js/base.js' %}生成的URL是否对应实际文件路径，确认static/news/js/base.js存在于项目根目录的static文件夹内。
   • 若返回200，查看响应内容是否与本地base.js一致，排除缓存或文件内容异常问题。

2. 移除重复的Bootstrap JS引入
   bootstrap.bundle.min.js已包含Popper.js和Bootstrap核心JS，同时引入bootstrap.min.js会导致冲突，保留前者即可，删除后者的引入代码。

3. 确认函数触发与DOM元素有效性

   • 在myFunction开头添加console.log("函数已执行")，打开浏览器控制台，点击菜单按钮查看是否有输出，判断函数是否被正确调用。
   • 确认页面中存在id="myTopnav"的元素，由于JS放在</body>前，DOM渲染顺序没问题，无需调整位置。

4. 修正静态文件配置冗余
   DEBUG模式下，静态文件直接从STATICFILES_DIRS读取，无需配置STATIC_ROOT相关的路由，移除urls.py中urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)这一行，避免路径冲突。

5. 强制清除浏览器缓存
   按Ctrl+Shift+R强制刷新页面，或在开发者工具中勾选「禁用缓存」后重新测试，排除旧缓存影响。

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