PHP页面模板中外部JS文件无法加载问题求助

• 先查文件路径正确性
  不管是直接写<script src>还是用wp_enqueue_script入队，先打开浏览器开发者工具的「网络」面板，查看这两个JS文件的请求状态：

  • 要是返回404，绝对是路径写错了。用WordPress自带的路径函数拼接更稳妥，子主题用get_stylesheet_directory_uri()，父主题用get_template_directory_uri()，示例代码：

    wp_enqueue_script('challenge-generator', get_stylesheet_directory_uri() . '/js/challengeGenerator.js', array('jquery'), '1.0', true);
    wp_enqueue_script('checkbox-interactions', get_stylesheet_directory_uri() . '/js/checkbox-interactions.js', array('jquery'), '1.0', true);
    

  • 最后那个true一定要加，它会让脚本在</body>标签前加载，避免DOM还没渲染完成就执行JS，导致找不到目标元素。

• 给JS代码套上DOM就绪监听
  内嵌脚本能正常运行，大概率是因为它放在页面DOM元素的后面，而外部脚本加载时页面元素还没生成。把两个JS文件里的代码都包进DOM就绪事件里：
  原生JS写法：

  document.addEventListener('DOMContentLoaded', function() {
    // 把原来的JS代码全部放这里面
  });
  

  依赖jQuery的话用这个写法：

  jQuery(document).ready(function($) {
    // 你的JS代码
  });
  

• 检查浏览器控制台报错
  按F12打开浏览器控制台，查看有没有红色报错信息：

  • 要是出现$ is not defined，说明jQuery没加载或者加载顺序不对，入队脚本时把jquery放进依赖数组就能解决；
  • 要是有其他变量冲突报错，就得检查代码里的变量名是不是和其他插件/主题的重名了。

• 强制清理缓存
  WordPress缓存插件、CDN、浏览器缓存都可能导致旧的（甚至不存在的）JS文件被加载。先清浏览器缓存，再禁用缓存插件测试，实在不行就在入队脚本的版本号参数里加time()强制刷新：

  wp_enqueue_script('challenge-generator', get_stylesheet_directory_uri() . '/js/challengeGenerator.js', array('jquery'), time(), true);
  

• 检查服务器文件权限
  服务器上的JS文件权限如果设置不正确（比如权限过严或过宽），会导致服务器拒绝访问，文件加载失败。一般把文件权限设为644就没问题。

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