要新标签页打开，必须用 window.open()；location.href 只能当前页跳转，加 _blank 也无效。onclick 中直接调用 window.open(url, '_blank') 是唯一可靠方式，且需确保用户事件触发以避免弹窗拦截。
button onclick 里用 window.open 还是 location.href？
直接说结论：要新标签页打开，必须用 window.open()；用 location.href 只能当前页跳转，无论加不加 _blank 都无效。
常见错误是写成：onclick="location.href='https://example.com';" —— 这根本不会开新标签页，纯属误导。浏览器对 location.href 的行为是同步替换当前文档，和 a 标签的 target 属性无关。
-
window.open(url, '_blank')是唯一可靠方式，且第二个参数'_blank'不能省略（否则某些浏览器可能复用旧窗口） - 注意弹窗拦截：如果调用不是用户直接触发（比如异步回调里执行），Chrome/Firefox 会拦截。所以
onclick里直接调用是安全的 - 返回值是窗口对象，可选做后续控制（如
win.focus()），但一般不需要
为什么不用 <a> 标签套 button？
有人图省事，把 button 套在 a 里，或者给 a 加 CSS 模拟按钮样式。这看似简单，但实际埋了两个坑：
- 语义错误：HTML 规范明确禁止
button作为a的子元素，会导致验证失败，部分读屏软件识别异常 - 焦点与键盘行为混乱：原生
button自带空格/回车触发，a则依赖href和tabindex，混合后 Tab 键顺序、Enter 响应可能错乱 - 移动端点击区域判断更复杂，尤其 iOS Safari 对嵌套可点击元素的处理不一致
真要样式统一，就用 button + window.open()，再用 CSS 控制外观，语义和交互都干净。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
如何避免 window.open 被拦截？
拦截只发生在非用户直接操作上下文中。只要确保调用发生在 click、keydown（且按键为 Enter/Space）等用户事件回调内，基本不会被拦。
- ❌ 错误示范：
setTimeout(() => window.open('...'), 100)—— 异步延迟后执行，大概率被拦 - ✅ 正确写法：
<button onclick="window.open('https://example.com', '_blank')">打开</button> - 如果逻辑复杂（比如要先发请求再跳转），务必把
window.open()放在事件回调最开始，或用event.preventDefault()后立即调用，不要等 Promise resolve
另外，window.open() 第三个参数可以传窗口尺寸（如 'width=800,height=600'），但现代浏览器大多忽略它，仅作兼容性保留，不必依赖。
需要兼容旧版 IE 或 Safari 时要注意什么？
IE11 及更早版本对 window.open() 的 _blank 处理较严格：如果页面没设置 rel="noopener"，新开页可通过 window.opener 反向访问原页面，存在安全风险。
- 现代写法建议补上
rel="noopener"（虽然button不支持该属性，但你开的新页 URL 可以自己加） - Safari 在 iOS 上默认禁用弹窗，且对
window.open()的同源限制更严，跨域 URL 必须是 HTTPS，HTTP 会被静默拒绝 - 如果目标地址是相对路径（如
'./page.html'），确保当前页面已加载完成（DOMContentLoaded 后），否则可能解析出错
真正容易被忽略的是：新标签页打开后，原页面的 JavaScript 执行不受影响，但若原页正在运行长任务（比如大量计算或未结束的 fetch），可能拖慢新页渲染——这不是跳转问题，而是资源调度问题，得靠业务逻辑拆分来解决。
