核心差異
| 特性 | window.open() | location.href |
|---|
| 返回值 | 新窗口引用 (WindowProxy) | 無（導航當前文檔） |
| 窗口特性 | 可控寬高、位置、工具欄、菜單欄等 | 不可控，瀏覽器決定 |
| 目標 | _blank 新標籤/窗、_self、_parent、_top、命名窗口 | 僅當前文檔（_self） |
| 阻攔風險 | 高（彈窗攔截器） | 低（正常導航） |
| 同源策略 | 跨域窗口引用受限（window.opener 可通信） | 同源導航無限制 |
適用場景
- window.open：OAuth 授權頁、幫助文檔、聊天窗口、預覽報表——需獨立窗口上下文。
- location.href：頁面跳轉、表單提交後重定向、單頁應用路由切換——主流程導航。
安全最佳實踐
// 開啟外部鏈接，防止反向訪問 opener
const w = window.open(url, '_blank', 'noopener,noreferrer');
if (w) w.opener = null;
- 始終加
noopener,noreferrer 切斷 window.opener 引用，防釣魚攻擊。
- 避免在 `onclick` 直接 `window.open`，改用 `` 語義化標籤。|
