在設定超連結時,若需要開啟新視窗,會對 <a>
加上 target="_blank"
的屬性值。
<a href="..." target="_blank">...</a>
在 MDN 文件中,對於前述提到的 target
屬性,除了 _self
, _blank
, _parent
, _top
這些特別的屬性值以外,例如 target="someone"
,則會在點擊後,開啟一個 window.name
為 someone
的新視窗。
這個名為 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/
最後,若我們非得讓 新視窗 去控制 原視窗,可以對 target
和 rel
設定如下:
<a href="..." target="_blank" rel="opener">...</a>