RN webview 내에서 window.close 이벤트를 감지하는 방법이 있나요?

React React Native
1

리액트 네이티브에서 웹뷰를 띄웠고… 웹뷰내에서 window.open 이벤트로 인한 새창이 열립니다.
여기까진 문제없는데 그 팝업창을 window.close 로 닫게 되면 webview 에는 그냥 하얀 화면만 나오게 됩니다. window.close 이벤트를 감지가 가능하면 window.close 발생시
웹뷰의 url 을 변경한다던가 reload 한다던가 해서 처리하면 좋은데 감지가 안되네요

안드로이드의 onCloseWindow(WebView window) 같은 메소드가 있으면 좋겠습니다.

그럼 감사합니다.

2

아래의 두가지 방법을 이용해서 window close 메소드를 override하여 close 호출시 postMessage를 통해 웹뷰에 알려주시거나 window.onbeforeunload 같은 이벤트에서 postMessage를 통해 웹뷰에 알려주는건 어떨까요?

override

const { close: _close } = window;                  
window.close = function() {
    //...window.postMessage 같은 webview에 알릴 코드 실행
    _close();                             
};

beforeunload

window.addEventListener('beforeunload', function (e) {
    //...window.postMessage 같은 webview에 알릴 코드 실행
});
3

WebView단 즉 웹페이지 내부에서 코드 수정이 없이
react native 단에서 모두 처리해야 해요…

위에 주신 코드를 보면 웹페이지 와 app 단에서 서로 연동해야 하는 작업이 필요할듯 하네요…

app 단에서 모두 처리 하는 방법은 없을까요?

4

안녕하세요… 같은 문제를 겪고 있는데요. 혹시 해결하셨는지요 ㅠ
똑같이 onCloseWindow(WebView window) 같은 메소드가 있어야 하는 상황이라서

5

웹페이지를 수정할 수 없는 상황이라면 WebView의 InjectJavascript 함수를 사용하여 위에 @Juwon_Jeong님이 말씀하신 것 처럼 지정하면 원하시는 결과를 얻을 수 있을 겁니다.

6

프로젝트 /node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java
파일에서
… 생략 —
protected WebView createViewInstance(ThemedReactContext reactContext) {
… 생략 …
WebSettings settings = webView.getSettings();

// 멀티팝업

 settings.setSupportMultipleWindows(true); /// 이거추가

… 생략 …

}
… 생략 …

하시면 수정됩니다.

7

안녕하세요 3년이나 지난 지금 구글링을 하다 찾은 글이라서 질문드립니다ㅠㅠ
이제 막 react native로 ios 앱 개발을 시작한 개발자입니다!
글 내용을 보면 window.open 이벤트로 인해서 react native 새창이 열린다고 하셨는데
제가 개발하고 있는 앱에서는 window.open이 동작을 안하는것 같아서요ㅠㅠ
혹시 어떻게 동작시켰는지 여쭤봐도 될까요?ㅠㅠ