window.open跳轉到一個已經打開的頁面

背景

背景是這樣的：某天拿到一個需求，在A頁面點擊打開B頁面，B頁面中操作完畢之後，關閉B頁面，跳轉回A頁面。此時如果A頁面處於打開狀態（此時A頁面可能已經人爲關閉了），則直接定位到該頁面，否則打開一個新頁面顯示A頁面。

分析

這裏自然就想到window.open函數了。這個函數有四個參數，但是常用的就是前兩個。

• 第一個參數（url）: 新頁面的地址；
• 第二個參數（target）: 頁面的名稱。如果當前打開的頁面中沒有該名稱的頁面。則打開新頁面，並給該頁面名稱標註爲target。否則跳轉到該頁面。

到這裏不免有疑問，這個頁面的名稱到底是個啥呢？多方查證，其實就是當前頁面的window.name屬性。

具體看下邊的一個具體例子

實例代碼

// A頁面
import React, { Component } from 'react'
export default class extends Component {
  componentDidMount() {
    window.name = 'A'     // 給A頁面的名稱設置爲“A”
  }
  handleClick=() => {
    window.open('/b', 'B')   // 打開B頁面，同時給B頁面設置名稱爲“B”
  }
  render() {
    return <div onClick={this.handleClick}>toB</div>
  }
}

// B頁面
import React, { Component } from 'react'
export default class extends Component {
  handleClick=() => {
    window.close()
    window.open('/a', 'A')
  }
  render() {
    return <div onClick={this.handleClick}>toA</div>
  }
}

此時在A頁面中點擊toB會打開B頁面。 在B頁面的控制檯輸入window.name會返回"B";
在B頁面點擊toA。 此時如果A頁面沒有關閉。則瀏覽器關閉B頁面且窗口會指向到A頁面並刷新。否則會關閉B頁面，在新打開一個A頁面。

遺留問題

如果B頁面不是由A頁面點擊產生，而是直接在瀏覽器中輸入url產生。 此時點擊toA。會產生兩個問題：

• 在瀏覽器新開一個A頁面（無論當面瀏覽器是否存在A頁面）；
• B頁面不會關閉。控制檯會輸出：Scripts may close only the windows that were opened by it. 網上很多解決這個問題的方法，遺憾的是 實測都無效

歡迎大佬們在評論區解答以上兩個問題。