会使所有未显式设置 target 的 url 行为(包括 提交、 加载等)默认在新标签页打开,导致表单提交后原页面白屏或状态丢失;需为关键 显式添加 target="_self" 覆盖,且不可省略;仅无 target 的 标签受其影响,window.open() 不受影响。

<base target="_blank"> 能让页面里所有没显式写 target 的链接默认在新标签页打开,但它的副作用比大多数人想的要大得多——不是“设了就完事”,而是会一并影响 <form></form> 提交、<img> 加载、<link> 引入等所有带 URL 的行为。
为什么 <base target="_blank"> 会影响表单提交
浏览器把 <base> 的 target 视为整个文档的默认目标,不区分语义。只要 <form></form> 没写 target,它就会按 <base> 的设定,在新标签页提交并跳转,导致原页面“白屏”或失去上下文。
- 常见现象:
<form action="/login"></form>提交后,登录成功页在新标签页打开,用户回到原页面时仍处于未登录状态 - 解决办法:给关键
<form></form>显式加target="_self",哪怕只有一处也要加 - 注意:
target="_self"不能省略——即使它是默认值,也得写出来才能覆盖<base>
<base href> 和 <base target> 能不能只用一个
可以,但必须分开考虑。HTML 规范允许 <base> 只含 href 或只含 target,但二者混用时容易出错。
- 只写
<base target="_blank">:安全,只改打开方式,不影响路径解析 - 只写
<base href="https://example.com">:影响所有相对 URL(<img src="a.png">会去请求https://example.com/a.png),慎用 - 同时写
href和target:路径和目标都强制统一,调试困难,尤其当页面含跨域资源或本地开发服务器时
哪些链接不受 <base target> 控制
只有“没显式声明 target”的链接才被覆盖。一旦写了,就优先级更高。
-
<a href="https://a.com" target="_self"></a>:强制当前页打开,无视<base> -
<a href="https://b.com" target="_top"></a>:强制顶层打开,同样无视 -
<a href="https://c.com"></a>(无target):受<base target>控制 - JavaScript 中用
window.open()打开的链接:完全不受影响,<base>是纯 HTML 行为
真正麻烦的不是怎么设,而是设完之后要不要全局检查所有 <form></form>、<iframe></iframe> 和第三方 SDK 插入的链接——它们可能悄悄依赖当前页上下文,而你根本没意识到 <base> 已经把它们全推到新标签页去了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











