如何在父窗口中访问有关子窗口的信息？

Question

我目前正在尝试弄清楚如何使用 React 打开一个新的子窗口，执行身份验证，然后将身份验证完成写回父页面。

我有一个标有“添加新”的按钮，当您单击它时会打开一个弹出窗口，该窗口在页面上有一个按钮。当您单击该按钮时，将打开一个新窗口，以便客户可以在其帐户中接受 OAuth 请求，然后该窗口会在身份验证成功后重新路由到回调 URL。但是，我希望能够阻止客户看到它重新路由，而是在成功完成身份验证后关闭窗口，以及让父页面将信息写入其中，我可以看到身份验证已完成并且触发下一个功能。关于如何做到这一点的任何想法？

我尝试通过不同的 Window 函数来查看是否有任何东西返回了子窗口的当前 URL，这样我就可以做一个 if 语句，说明当 URL = 回调 URL 时，关闭窗口并写到页面，但我没有运气。似乎一旦新窗口打开，父窗口就没有保留有关该窗口的信息。任何关于如何获取写入父窗口的新子窗口信息的想法将不胜感激。

如果有帮助，我在下面粘贴了一些函数。

下面是AuthButton组件，在App组件中调用。 AuthButton 组件打开弹出窗口，其中包括将打开身份验证窗口的按钮。

<AuthButton
      activatePopup={this.activatePopup.bind(this)}
      auth={this.auth.bind(this)}
      showPopup={this.state.showPopup}
      closePopup={this.activateAuthPopup.bind(this)}
/>

这是打开新子窗口的按钮组件：

class Button extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render() {
        return (
            <div>
                <button 
                style={{
                    backgroundColor: "fff", 
                    backgroundImage: `url(${logo})`, 
                    backgroundSize: '70%', 
                    color: "#000", 
                    width: "18em", 
                    height: "10em", 
                    backgroundRepeat: "no-repeat", 
                    backgroundPosition: "center", 
                    margin: "10px",
                    borderStyle: "solid",
                    borderColor: "#000",
                    borderWidth: "2px",
                    borderRadius: "5px"
                }} 
                onClick = {
                    this.props.auth
                }></button>
          </div>
        );
    }
}

在 App 组件的 App.js 文件中，有一个 auth 函数（如下所列）。 Axios 正在访问应用程序中的路由，它返回身份验证 URL，我们获取该 URL 并执行 window.open，这将打开一个新窗口，客户可以在其中进行身份验证。

  auth = () => {
      axios('/auth/oauth/authorize', {
        headers: {
          "Access-Control-Allow-Origin": true,
          'maxRedirects': 0
        }
      })
      .then(response => {
        console.log("Response", response);
        console.log("URL", response.data.href);
        var strWindowFeatures = "width=1000,height=800,resizable,scrollbars=yes,status=1";
        var windowpop = window.open(response.data.href, null, strWindowFeatures)
        console.log("Window Location Href", windowpop.location.href);
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

窗口位置 Href 返回 'about:blank'。

如果我可以提供任何其他信息，请告诉我！谢谢！

Answer 1

所以为了解决这个问题，我们目前正在路由函数中在身份验证成功时关闭窗口，并且在 React 函数中我正在运行一个计时器来查找 window.closed 是 true 还是 false，如果它是真实的，而不是我们正在改变某些状态。

auth = () => {
      axios('/auth/oauth/authorize', {
        headers: {
          "Access-Control-Allow-Origin": true,
          'maxRedirects': 0
        }
      })
      .then(response => {
        var strWindowFeatures = "width=1000,height=800,resizable,scrollbars=yes,status=1";
        var windowpop = window.open(response.data.href, null, strWindowFeatures)
        this.setState({
          authUrl: response.data.href
        })
        windowpop.focus()
        var newThis = this; 
        var timer = setInterval(function() {   
            if(windowpop.closed) {  
                clearInterval(timer);
                newThis.setState({
                  logo: logo,
                  opacity: 0.5,
                  success: true
                });
                console.log('closed');  
            }  
        }, 1000); 
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }