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. 网上很多解决这个问题的方法，遗憾的是 实测都无效

欢迎大佬们在评论区解答以上两个问题。