如何仅在部分EJS模板中加载指定JavaScript文件？

方案1：通过模板变量传递需加载的脚本列表 #

• 在需要加载特定JS的页面路由中，传递一个pageScripts数组参数：

  // information页面路由示例
  app.get('/information', (req, res) => {
    res.render('information', {
      pageScripts: ['/js/upload.js']
    });
  });
  

• 在footer.ejs的Bootstrap JS CDN链接之后，添加条件渲染逻辑：

  <script src="Bootstrap CDN链接"></script>
  <% if (typeof pageScripts !== 'undefined' && pageScripts.length) { %>
    <% pageScripts.forEach(scriptPath => { %>
      <script src="<%= scriptPath %>"></script>
    <% }) %>
  <% } %>
  

• 优势：逻辑清晰易维护，未传递该变量的路由不会触发渲染，也不会出现变量未定义错误，完全兼容现有代码。

方案2：前端动态读取页面标记加载脚本 #

• 在需要加载特定JS的页面（如information.ejs）中，添加隐藏标记元素：

  <!-- 可放在页面任意位置 -->
  <div class="page-script" data-script="/js/upload.js" style="display: none;"></div>
  

• 在footer.ejs的Bootstrap JS之后，添加通用动态加载代码：

  <script src="Bootstrap CDN链接"></script>
  <script>
    document.querySelectorAll('.page-script').forEach(el => {
      const scriptUrl = el.dataset.script;
      if (scriptUrl) {
        const script = document.createElement('script');
        script.src = scriptUrl;
        document.body.appendChild(script);
      }
    });
  </script>
  

• 优势：无需修改后端路由和模板参数，仅需在目标页面添加标记即可；脚本加载顺序由前端控制，确保在Bootstrap之后执行。

方案3：利用EJS模板的内容占位符 #

• 在footer.ejs的Bootstrap JS之后预留占位符：

  <script src="Bootstrap CDN链接"></script>
  <%= pageScriptContent || '' %>
  

• 在需要加载特定JS的页面路由中，直接传递脚本HTML字符串：

  app.get('/information', (req, res) => {
    res.render('information', {
      pageScriptContent: '<script src="/js/upload.js"></script>'
    });
  });
  

• 优势：单脚本场景下写法简洁，未传参页面会渲染空字符串，无报错风险。

内容的提问来源于stack exchange，提问作者hamid-davodi