Comment fermer une fenêtre dans un composant React?

Question

Cela semble ridiculement simple mais je ne suis pas en mesure de trouver une solution pour cela à partir de Google.

Sur ma page, j'ai un bouton pour fermer la page elle-même

<Button onClick={() => window.close()} >Close</Button> 

Mais à chaque fois que le déclenchement de la touche, je suis l'avertissement

Scripts may close only the windows that were opened by it. 

J'utilise react-native pour mon application mobile, il se connecte à keycloak à (par WebView de RN) ouvrir la page d'authentification Facebook, puis, après cela, keycloak redirige vers success page (localhost/login/success qui a le bouton pour fermer la page lui-même. La page est sous next.js). Même i accéder localhost/login/success directement sur le navigateur, je ne peux pas page fermer ni

Mise à jour j'ai réussi à contourner en utilisant onNavigationStateChange et vérifiez si le navState.url contient le success/login ou non pour déclencher l'état et fermer la WebView. Mais je suis toujours curieux de savoir comment fermer la fenêtre dans React?

Answer 1

Vous pouvez utiliser onMessage prop pour communiquer entre WebView et React-Native.

Une fonction qui est invoquée lorsque les appels webview window.postMessage. La définition de cette propriété injectera un postMessage global dans votre webview, mais appellera quand même les valeurs préexistantes de postMessage.

Exemple

_onMessage = (message) => { 
    console.log(message); 
} 

render() { 
    return (<WebView ref={(ref) => { this.webView = ref; }} onMessage={this._onMessage} ..otherProps />); 
} 

---

// In your webview inject this code 

<script> 
    window.postMessage("Sending data from WebView"); 
</script>