資訊專欄INFORMATION COLUMN
摘要：新頁面中有一個(gè)按鈕，告訴打開我的那個(gè)頁面，我喜歡林志玲。點(diǎn)擊新頁面的按鈕然后回到第一個(gè)頁面，發(fā)現(xiàn)第一個(gè)頁面多出來了一排紅色的文字我喜歡林志玲。
最近在開發(fā)一個(gè)react項(xiàng)目，項(xiàng)目是用create-react-app腳手架創(chuàng)建的，當(dāng)我在我的項(xiàng)目的菜單欄中添加了一個(gè)打開一個(gè)外鏈的a標(biāo)簽時(shí)，我收到了一個(gè)來自create-react-app的警告信息，信息內(nèi)容如下
意思就是說“在沒有rel="noopener noreferrer"屬性的a標(biāo)簽中使用target="_blank"存在一定的風(fēng)險(xiǎn)”
這個(gè)提示瞬間把我吸引了，以前關(guān)于a標(biāo)簽收到的提示都是沒有設(shè)置alt屬性啊什么的，但是也只是提示我說為了顯示的友好什么的，這次竟然提示我有風(fēng)險(xiǎn)，面對(duì)這種問題，必須一探究竟啊。
查閱了一些資料得到了如下關(guān)于a標(biāo)簽一個(gè)介紹
當(dāng)一個(gè)外部鏈接使用了target=_blank的方式，這個(gè)外部鏈接會(huì)打開一個(gè)新的瀏覽器tab。此時(shí)，新頁面會(huì)打開，并且和原始頁面占用同一個(gè)進(jìn)程。這也意味著，如果這個(gè)新頁面有任何性能上的問題，比如有一個(gè)很高的加載時(shí)間，這也將會(huì)影響到原始頁面的表現(xiàn)。如果你打開的是一個(gè)同域的頁面，那么你將可以在新頁面訪問到原始頁面的所有內(nèi)容，包括document對(duì)象(window.opener.document)。如果你打開的是一個(gè)跨域的頁面，你雖然無法訪問到document，但是你依然可以訪問到location對(duì)象。
不看不知道一看嚇一跳有木有。主要是兩個(gè)點(diǎn)是我以前從未在意的
用target="_blank"方式打開的tab和原始頁面占用同一個(gè)進(jìn)程（UI進(jìn)程）
新打開的頁面能獲取到原始頁面的document。
第一個(gè)問題不用我說都知道是非常需要注意的，新的頁面中的所有行為都會(huì)間接影響到原始頁面的性能。
這里主要研究第二個(gè)問題。為此，我做了小小的實(shí)驗(yàn)。
上圖解釋：
首先打開了第一個(gè)頁面，第一個(gè)頁面只有一個(gè)“打開一個(gè)新頁面”的a標(biāo)簽
點(diǎn)擊這個(gè)鏈接，打開了一個(gè)新頁面。新頁面中有一個(gè)按鈕，“告訴打開我的那個(gè)頁面，我喜歡林志玲”。
點(diǎn)擊新頁面的按鈕然后回到第一個(gè)頁面，發(fā)現(xiàn)第一個(gè)頁面多出來了一排紅色的文字“我喜歡林志玲”。
停在第一個(gè)頁面5s鐘，第一個(gè)頁面自動(dòng)跳轉(zhuǎn)到了百度首頁。
上面兩個(gè)頁面的代碼分別如下：
opener-test.html
打開一個(gè)新頁面
opener-test-2.html
我是新打開的頁面
新的頁面不僅往原始頁面添加了一段話，而且還讓他離開了原來的頁面。
注：在上面的例子中，兩個(gè)頁面位于同一個(gè)域下面，如果兩個(gè)頁面位于不同的域，那上面的第一個(gè)效果就是不行的，因?yàn)椴煌虻那闆r下，新頁面拿不到opener對(duì)象的document，但是location對(duì)象是可以拿到的，所以第二個(gè)效果任然有效。
怎么禁止上面的行為呢？按照create-react-app的提示信息，給連接加上rel屬性，如下：
上面的rel屬性值多了一個(gè)noreferrer它的作用和noopener是一樣的，只是適用于低版本的瀏覽器。
這樣處理后，新打開的頁面的window對(duì)象上就沒有opener和referrer對(duì)象了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/53592.html
摘要：通過裝飾器或者利用時(shí)調(diào)用的函數(shù)來進(jìn)行使用下面代碼中當(dāng)或者發(fā)生變化時(shí)，會(huì)監(jiān)聽數(shù)據(jù)變化確保通過觸發(fā)方法自動(dòng)更新。只能影響正在運(yùn)行的函數(shù)，而無法影響當(dāng)前函數(shù)調(diào)用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標(biāo)準(zhǔn)的綁定規(guī)則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術(shù)棧,使用Create-React-App腳手架進(jìn)行一個(gè)移動(dòng)端項(xiàng)目搭建，主要介紹項(xiàng)...
摘要：這個(gè)選項(xiàng)看意思就知道了，默認(rèn)使用來安裝，運(yùn)行，如果你沒有使用，你可能就需要這個(gè)配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波關(guān)于create-react-app 源碼的關(guān)鍵詞，發(fā)現(xiàn)掘金出現(xiàn)好幾篇仿文，就連我開頭前沿瞎幾把啰嗦的話都抄，我還能說什么是吧？以后博客還是首發(fā)在Github上，地址戳這里戳這里！！轉(zhuǎn)載求你們注明出處、改編求你們貼一下參考鏈...
摘要：相信用的同學(xué)也不少找到函數(shù)在其中中添加啟用編譯。。。react 最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項(xiàng)目，有必要的記錄一下配置的過程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個(gè) $ npm or c...
react 最近已經(jīng)開始使用react技術(shù)棧了，從頭開始搭建項(xiàng)目，有必要的記錄一下配置的過程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用 我們一般也采用這個(gè) $ npm or cnpm $ npm install create-react...
閱讀 1225·2021-11-11 16:54
閱讀 1738·2021-10-13 09:40
閱讀 933·2021-10-08 10:05
閱讀 3498·2021-09-22 15:50
閱讀 3701·2021-09-22 15:41
閱讀 1782·2021-09-22 15:08
閱讀 2338·2021-09-07 10:24
閱讀 3571·2019-08-30 12:52
