251. (TWOK/ERROR) [Flutter] iOS Webview 웹뷰에서 Alert 팝업창 호출 미동작 이슈 - Web Alert Not Working

---

[환경 설정 및 설명]

​

프로그램 : Flutter

​

설 명 : [Flutter] iOS Webview 웹뷰에서 Alert 팝업창 호출 미동작 이슈 - Web Alert Not Working

 

---

[에러 원인]

​

1. 플러터 webview_flutter 모듈을 사용해 웹뷰 구현 시 iOS 아이폰에서는 Web 기본 Alert , Confirm 등 팝업창 이벤트가 발생하지 않음

---

[해결 방법]

​

방안 [1] : Xcode 수행 후 >> Pods 파일에서 webview_flutter 라이브러리 코드 수정해서 동작하도록 설정

​

​

방안 [2] : window.alert 이벤트 감지를 위한 Web <-> App 브릿지 경로 추가 작성 후 Alert 이벤트 발생 시 네이티브에서 커스텀 팝업창 표시 대체

​

>> 플러터 웹뷰 로딩 완료 상태 onPageFinished 부분에서 스크립트 코드 작성 후 적용 실시

​

          onPageFinished: (String url) async { // [웹 로딩 완료]
            print("");
            print("-------------------------------------------------------");
            print("onPageFinished :: ${url}");
            print("-------------------------------------------------------");
            print("");

            // TODO [Alert 팝업창 표시 대응 위한 스크립트 코드 작성] >> [Web To App 브릿지 받는 구간에서 Alert 정의 (addJavaScriptChannel)]
            try {
              var javascript = '''
              window.alert = function (e){
                var uagent = navigator.userAgent.toLowerCase();
                var android_agent = uagent.search("android");
                var iphone = uagent.search("iphone");
                var ipad = uagent.search("ipad");
                
                if (android_agent > -1) {

                    window.Alert.postMessage(String(e));
                }
                else {
                    window.webkit.messageHandlers.Alert.postMessage(String(e));
                }
                
              }
              ''';

              await controller?.runJavaScript(javascript);
            } catch (_) {}
          },

 

>> Web >> App 브릿지 호출 코드 작성 및 이벤트 대응

      ..addJavaScriptChannel( // [Web >> Mobile 브릿지 추가]
        // TODO Web >> Android : [window.Alert.postMessage("Android");]
        // TODO Web >> IOS : [window.webkit.messageHandlers.Alert.postMessage("Ios");]
        'Alert',
        onMessageReceived: (JavaScriptMessage message) {

          // [Alert 팝업창 커스텀 처리]
          showAlertDialog(context, message.message);

        },
      )

---

[참고 사이트]

​

https://blog.naver.com/kkh0977/223494519642

223. (Flutter/플러터) [Mac] : [skill] : [webview_flutter] Webview 웹뷰 모듈 설치 방법 설명

---