target=_blank爲什麼要使用rel=noopener

我們經常使用a標籤用target='_blank'就完事了,是的,我曾經也是這麼用的,直到今天測試一個在qq郵箱中用a標籤在線打開一個文檔時,就發現問題了,沒有加rel='noopener',始終打不開文檔,當加了此屬性時就可以打開下載了。於是沒辦法只能瞅瞅該屬性到底是個啥!

當你使用 target='_blank' 打開一個新的標籤頁時,新頁面的 window 對象上有一個屬性 opener,它指向的是前一個頁面的 window 對象,因此,後一個頁面就獲得了前一個頁面的控制權。

比如的 a 標籤是這樣 <a href='/index.html'>打開連接</a> ,打開後在控制檯輸入 window.opener.alert() 看看?

甚至在跨域的情況下他也可以生效,比如打開 <a href='https://blog.csdn.net/jimolangyaleng'>鏈接<a/>後,你可以使用 window.opener.location.replace 更改前一個頁面的 url。

那麼,爲了避免這種情況,所以我們通常會加上rel='noopener'或rel='noopener  norefferrer'

比如你的鏈接現在變成了這樣 <a href='/index.html' rel=noopener>鏈接<a/> ,再打開後你會發現 window.opener 已經被置爲了 null,如果是一些舊的瀏覽器,可以使用 rel=norefferrer,它不僅禁用了 window.opener,後一個頁面也無法獲取到 refferrer,再不行,可以利用 js 來打開新的頁面,之後將 opener 置爲 null 來完成這個功能

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章