您如何在父窗口中訪問有關子窗口的信息？

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

因此，要解決此問題，我們當前在身份驗證成功時關閉route函數中的窗口，並且在React函數中，我運行一個計時器，用於查找window.closed是true還是false，以及是否true我們正在改變某些狀態。

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);
      });
  }