如何关闭React组件中的窗口？

Question

这听起来非常简单，但我无法从谷歌找到任何解决方案。

在我的页面上，我有一个关闭页面的按钮

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

但每次触发按钮时，我都会收到警告

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

我正在使用react-native用于我的移动应用，它连接到keycloak到（通过WebView RN）开放的Facebook身份验证页面，之后，keycloak重定向到success页面（localhost/login/success，其中包含关闭页面本身的按钮。页面位于next.js下方。即使我直接在浏览器上访问localhost/login/success，我也无法关闭页面

更新我设法使用onNavigationStateChange进行解决，并检查navState.url是否包含success/login来触发状态并关闭{{ 1}}。但我仍然对如何在WebView关闭窗口感到好奇？

Answer 1

您可以使用onMessage道具在WebView和React-Native之间进行通信。

  

webview调用时调用的函数   window.postMessage。设置此属性将注入一个   postMessage全球webview，但仍会致电   预先存在的值postMessage。

示例

_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>