日期脚本封装到footer.php后导入其他页面失效的技术问题

问题情况 #

将页脚封装到footer.php文件，通过jQuery的load方法导入到其他页面后，原本用于生成年份的脚本失效，仅显示「© MYWEBSITE.COM All Rights Reserved」，缺失动态生成的年份；但直接在页面编写页脚代码时，脚本可正常输出如「© 2004 MYWEBSITE.COM All Rights Reserved」的内容。

原因分析 #

1. 带选择器的load调用会剥离脚本：当使用$('#loadedFooter').load('footer.php #siteFooter')这种带选择器的加载方式时，jQuery会先加载footer.php的全部内容，再提取匹配#siteFooter的DOM元素，此过程会自动移除元素内部的<script>标签，导致脚本无法执行。
2. 异步加载后document.write的问题：即便脚本未被剥离，页面初始渲染完成后异步执行document.write，会清空现有文档内容，而非在指定位置插入年份。

解决方案 #

方案一：后端生成年份（推荐）

直接在footer.php中用PHP输出当前年份，彻底规避前端脚本执行问题，兼容性最优：
修改footer.php的版权代码：

<div id="siteFooter">
  <div class="copyright">&copy;&nbsp;<?php echo date('Y'); ?> MYWEBSITE.COM All&nbsp;Rights&nbsp;Reserved</div>
</div>

后端预先生成年份的HTML内容，无论直接引用还是异步加载，都能正常显示。

方案二：前端DOM操作插入年份（纯前端修改）

若无法修改后端代码，可在load加载完成后，通过DOM操作手动插入年份：

1. 先修改footer.php，移除原有脚本：

<div id="siteFooter">
  <div class="copyright">&copy;&nbsp; MYWEBSITE.COM All&nbsp;Rights&nbsp;Reserved</div>
</div>

2. 修改页面中的load调用，添加回调函数：

<div id="loadedFooter"></div>
<script>
$('#loadedFooter').load('footer.php #siteFooter', function() {
  const currentYear = new Date().getFullYear();
  // 在版权文本前插入年份
  $('.copyright').prepend(currentYear + '&nbsp;');
});
</script>

也可以给copyright元素添加一个年份占位<span class="year"></span>，再在回调中给该span赋值，定位更精准。

方案三：调整load调用方式（不推荐）

若需保留原脚本，可去掉load的选择器，手动处理加载内容并执行脚本，但存在安全风险：

<div id="loadedFooter"></div>
<script>
$.get('footer.php', function(data) {
  const footerDom = $(data).find('#siteFooter');
  $('#loadedFooter').append(footerDom);
  // 手动执行脚本
  footerDom.find('script').each(function() {
    eval($(this).text());
  });
});
</script>

⚠️ 注意：使用eval存在安全风险，且原脚本中的document.write仍会清空页面，不建议采用此方案。

内容的提问来源于stack exchange，提问作者Q-Tip