如何关闭 React 组件中的窗口

Question

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

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

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

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

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

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

更新我设法通过使用onNavigationStateChange变通方法，并检查navState.url是否包含触发状态并关闭WebView success/login。但我仍然很好奇如何在React关闭窗户？

Answer 1

您可以使用onMessage prop 在 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>