XAMPP环境下通过引入的footer.php链接的JS脚本运行不生效如何解决

• 引入路径错误，包含两种场景
  • footer.php本身未被正确引入：你用的相对路径include 'inc/footer.php'在不同运行目录下解析逻辑可能发生偏差，导致footer.php加载失败，自然不会输出JS标签。
  • JS文件的引用路径错误：src="js/xxx.js"是相对当前访问的入口文件（即首页）的路径，而非相对footer.php的存储路径，和你实际的目录结构不匹配时会出现404，导致JS加载失败。
• HTML结构不完整：header.php中如果存在未闭合的标签、缺少<body>起始标签、输出了PHP报错信息等问题，会导致后续输出的script标签无法被浏览器正常解析执行。
• JS执行逻辑错误：即便JS文件加载成功，如果你自定义的myScript.js中存在语法错误、依赖未初始化就调用、操作未渲染完成的DOM等问题，也会表现为脚本不生效。

• 第一步：验证基础加载是否正常
  访问首页后右键点击「查看网页源代码」，确认footer.php里的4个script标签已经完整输出在页面底部。如果没有，将include语句改为用绝对路径引入：

  <?php include __DIR__ . '/inc/header.php'; ?>
  <!-- 首页其他代码 -->
  <?php include __DIR__ . '/inc/footer.php'; ?>
  

  __DIR__是PHP内置常量，代表当前文件所在的绝对目录，可避免相对路径解析混乱的问题。
• 第二步：修复JS文件路径
  优先使用站点根路径引用静态资源，避免相对路径在不同路由下的解析偏差。假设你的项目部署在XAMPP的htdocs/my_project目录下，访问地址为http://localhost/my_project/，可将footer.php中的JS引用修改为：

  <script src="/my_project/js/jquery-3.5.1.min.js"></script>
  <script src="/my_project/js/popper.min.js"></script>
  <script src="/my_project/js/bootstrap.min.js"></script>
  <script src="/my_project/js/myScript.js"></script>
  

  也可以在公共配置文件中定义项目根URL常量，动态输出避免后续部署修改：

  // 公共配置文件，比如inc/config.php
  define('SITE_ROOT', 'http://localhost/my_project/');
  

  footer中引用：

  <script src="<?= SITE_ROOT ?>js/jquery-3.5.1.min.js"></script>
  

• 第三步：排查脚本执行问题
  按F12打开浏览器开发者工具：
  • 切换到「网络(Network)」标签，刷新页面查看JS文件是否加载成功，出现404则继续调整路径。
  • 切换到「控制台(Console)」标签，查看是否有JS运行报错，根据报错信息调整代码。如果是DOM操作不生效，可将自定义JS代码包裹在DOM加载完成的回调中（jQuery环境下写法）：

  $(function() {
    // 把你原来的自定义JS代码放到这里
  })
  

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