document.baseURI 不会随 base 标签 href 动态更新，应通过 document.querySelector('base')?.href 实时读取已解析的绝对 URL，注意 IE11 兼容性及多 base 场景。
base 标签的 href 属性不能靠 document.baseURI 动态读取
很多人误以为 document.baseURI 是实时反映 <base href="..."> 的值，其实它只在页面初始加载时生效，后续用 JavaScript 修改 <base> 的 href 属性，document.baseURI 不会更新。真正能动态读取当前 <base> 值的，只有手动查 DOM。
用 document.querySelector('base') 获取当前 base 元素
这是最直接、兼容性最好的方式。注意：即使页面没有显式写 <base>，浏览器也会隐式创建一个（href 为当前页面 URL），所以查询结果不会是 null，但它的 href 属性值可能不是你预期的。
实操建议：
- 始终检查
baseEl?.href是否存在，避免空指针（虽然极少见） - 如果页面有多个
<base>，document.querySelector只返回第一个，而规范只允许一个，所以实际应确保 HTML 合法 - 读取到的
href是**已解析的绝对 URL**（例如<base href="./static/">会变成"https://example.com/static/"），不是原始字符串
示例：
const baseEl = document.querySelector('base');
const currentBase = baseEl?.href || window.location.origin + '/';
修改 base 标签后需手动触发资源路径重解析？
JavaScript 修改 baseEl.href = 'https://cdn.example.com/' 后，已加载的资源（如图片、脚本）不会自动重定向，也不会影响后续通过 new URL('a.js', document.baseURI) 构造的 URL —— 因为 document.baseURI 不变。这点常被忽略。
如果你依赖 base 来生成链接，必须显式使用当前 DOM 中的 baseEl.href：
- 不要用
new URL(path, document.baseURI) - 改用
new URL(path, baseEl.href) - 或者封装一个函数统一处理：
function resolveUrl(path) { return new URL(path, document.querySelector('base')?.href || location.href); }
IE11 下 document.querySelector('base') 返回 null 的情况
仅发生在 <base> 标签写在 内（违反 HTML 规范），IE11 会将其移出 DOM 树，导致查不到。现代浏览器会自动纠正位置，但 IE11 不会。
排查和修复建议：
- 用
document.getElementsByTagName('base')替代（返回 HTMLCollection，IE11 兼容） - 确保
<base>始终放在内，且在任何<script></script>执行前就存在 - 若需动态插入 base，应在
document.head.appendChild(baseEl)后立即读取，而非依赖初始解析
IE11 兼容写法示例：
const baseEls = document.getElementsByTagName('base');
const baseEl = baseEls.length ? baseEls[0] : null;
const currentBase = baseEl?.href || location.origin + '/';
实际项目里最容易漏掉的是：把 baseEl.href 当作“一次性配置”缓存起来，却没意识到它可能被其他脚本动态修改 —— 尤其在微前端或 CMS 插件场景中，<base> 很可能被运行时覆盖。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
