无需Thymeleaf复用HTML页面<head>的实现方案咨询（基于Bootstrap）

没问题！不用Thymeleaf的话，咱们完全可以用前端原生方法或者借助Bootstrap可能附带的jQuery来实现这个需求。下面给你两种实用的方案：

方案一：原生JavaScript Fetch API #

纯原生JS就能搞定，不需要额外依赖，步骤清晰：

// 替换成你的目标head页面路径，比如'/common/shared-head.html'
const targetHeadUrl = 'path/to/your/shared-head.html';

fetch(targetHeadUrl)
  .then(response => response.text())
  .then(html => {
    // 创建临时DOM容器来解析目标页面的HTML
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = html;
    // 提取目标页面的<head>内部内容
    const sharedHeadContent = tempContainer.querySelector('head').innerHTML;
    // 将内容插入到当前页面的<head>末尾
    document.head.insertAdjacentHTML('beforeend', sharedHeadContent);
  })
  .catch(error => {
    console.error('加载共享head内容失败:', error);
  });

小提示 #

• 如果目标页面里有重复的meta标签、样式或脚本，可能会和当前页面的内容冲突，尽量确保复用的head是通用且无重复的部分。
• 可以把这段代码放在当前页面的<script>标签里，建议放在<head>的末尾，避免阻塞页面渲染。

方案二：jQuery的load方法（适合Bootstrap 3/4场景） #

如果你的项目因为Bootstrap 3或4引入了jQuery，用这个方法会更简洁：

// 直接加载目标页面<head>下的所有元素到当前页面的<head>中
$('head').load('path/to/your/shared-head.html head > *');

为什么好用？ #

jQuery会帮你自动处理HTML解析和DOM插入的工作，一行代码就能完成需求，非常省心。

关键注意事项 #

• 跨域限制：如果当前页面和目标页面不在同一个域名（甚至端口、协议不同），浏览器的同源策略会阻止请求。这种情况下需要后端帮忙转发，或者配置CORS允许跨域访问。
• 资源路径问题：目标页面里的相对路径（比如CSS、JS文件）是相对于当前页面的，不是目标页面的。最好改成绝对路径，或者确保这些资源在当前页面的路径下能正常访问。
• 重复资源冲突：如果当前页面已经加载了某些样式或脚本，复用head时要避免重复加载，否则可能导致样式错乱或脚本报错。

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