瀏覽器子Tab能控制父Tab嗎

前言

疫情無情人有情，在疫情期間，在家窩了小一個月，回杭發現本身胖了幾斤。去年秋天的減肥之旅，付之東流。

話說回來，今年文章更新的頻率降低了，主要緣由是部門老大給我安排了新的任務，讓我作主程，項目進度都得本身把控，包括測試和上線都要我去督促，因此就耽誤了學習了，不過我在開發過程當中，解決了一個比較有趣的問題，這是早些年困擾過個人問題，此次解決了以爲比較有趣，就分享給你們。

分析需求

產品🐶來了一個需求，大概是這樣的。有一個列表頁面 A，列表的每一項都有一個編輯功能，點擊編輯功能跳轉到新的頁面，而後編輯該項，結束以後點擊確認按鈕，要把當前編輯頁面關閉，而且要保證列表頁面 A 刷新，展現出最新的編輯狀況，畫個示意圖以下。

試問兩個 Tab 怎麼通訊呢，縱然你是神，你也得老老實實作以下操做：

找到答案

通過一番搜索，找到了一個比較這個需求的解決方案，那就是 window.opener 這個全局屬性。先來介紹一下它。

opener 屬性是一個可讀可寫的屬性，可返回對建立該窗口的 Window 對象的引用。當使用 window.open() 打開一個窗口，您能夠使用此屬性返回來自目標窗口源（父）窗口的詳細信息。 代碼提示： window.opener.close() 將關閉源（父）窗口。

簡單的說，就是我如今能夠經過在編輯頁面 B 經過 window.opener 拿到列表頁 A 的全局對象。

再看看它的瀏覽器支持狀況：

數據來源於 www.caniuse.com 這個網站專門查詢一些瀏覽器對屬性的兼容性。從圖片中能夠看出 opener 的支持狀況仍是比較樂觀的，大多數瀏覽器都已支持。

那麼問題就變得簡單了，假設 A 頁面獲取數據的方法是 LoadData，那麼我將 LoadData 掛載到 A 頁面的一個全局變量上，代碼以下：

window._A_LOADDATA = LoadData;
複製代碼

全局變量必定要注意要規範一些，避免形成全局變量的污染，最好 A 頁面銷燬的時候，清除一下 window._A_LOADDATA 。

而後在 B 頁面，編輯完信息提交保存接口的回調函數處調用 window.opener._A_LOADDATA 方法：

savaEdit().then({
  window.opener._A_LOADDATA()
  window.close()
})
複製代碼

這樣執行 window.opener._A_LOADDATA() 後，列表頁 A 就會執行 LoadData 方法，刷新當前頁面的數據，獲得編輯後的結果。

總結

問題不難，可是但願你們能學到的是解決問題的這個過程，不要一有問題就去羣裏問：「有大佬在嗎？幫我解決一下**問題」。我能夠很明確的告訴你，身爲大佬的我，鳥都不想鳥你（開個玩笑），本身去百度搜答案去吧。大多數問題搜索引擎加上本身的一些分析和理解能力，都是能夠迎刃而解的，實在解決不了，再去請求本身上司的幫助，相信他不會爲難你。