利用 Anchor <a> 開啟的新視窗,如何設定原視窗的屬性值

Lin Rei
4 min readJul 1, 2021

--

Photo by Ant Rozetsky on Unsplash

在設定超連結時,若需要開啟新視窗,會對 <a> 加上 target="_blank" 的屬性值。

<a href="..." target="_blank">...</a>

在 MDN 文件中,對於前述提到的 target 屬性,除了 _self , _blank , _parent , _top 這些特別的屬性值以外,例如 target="someone" ,則會在點擊後,開啟一個 window.namesomeone 的新視窗。

這個名為 someone 的新視窗,可以使用 window.opener 取得及設置原視窗物件的屬性值。

例如:在 新視窗 執行 window.opener.close() 將 原視窗 關閉、執行 window.opener.location.reload() 重新整理 原視窗。

target="_blank" 開啟的新視窗,卻沒有辦法利用 window.opener 去控制原視窗。

這要先提到另外一個相關屬性 rel ,如下圖,在 MDN 文件中提及,當設置了 target ,就要考慮加上 rel="noopener" ,以避免延伸的安全性問題。
(禁止新視窗能透過 window.opener 控制原視窗)

在目前主流的瀏覽器們,都已實作 target="_blank" 就意指 rel="noopener" ,即使我們沒有特意去設定 rel

https://www.chromestatus.com/feature/6140064063029248
https://chromium-review.googlesource.com/c/chromium/src/+/1630010
https://bugzilla.mozilla.org/show_bug.cgi?id=1522083
https://webkit.org/blog/8475/release-notes-for-safari-technology-preview-68/
https://trac.webkit.org/changeset/237144/webkit/

最後,若我們非得讓 新視窗 去控制 原視窗,可以對 targetrel 設定如下:

<a href="..." target="_blank" rel="opener">...</a>

--

--