[Flutter] 플러터 InAppWebView JS로 값 주고받기

플러터 InAppWebView로 javscript function을 통해 데이터를 주고받을 수 있습니다.
WEB에서 APP, APP에서 WEB으로 데이터를 어떻게 전송하는지 알아보겠습니다.

 

1. addJavaScriptHandler (WEB -> APP)

 

WEB 코드

function webToApp_Function() {
	
    //Flutter에서 WebView가 모두 로드되었을 경우
    if (isFlutterInAppWebViewReady) {
        
        //WEB에서 APP으로 넘겨줄 데이터
        var args = [{'name': value}];
        window.flutter_inappwebview.callHandler('handler명', ...args);
    }

}

 

위 코드블럭처럼 function을 구현하고 handler명을 지정해줍니다.

여기서 handler명은 " 나 이 이름으로 앱에게 연락할거야!! "  같이 미리 APP쪽의 어떤 Handler를 사용할 지

명시해주는것입니다.

DART 코드

_controller.addJavaScriptHandler(
    handlerName: 'handler명', callback: (args) {
  return {
    //앱에서 처리할 로직을 작성
  };
});

 

 

controller.addJavaScriptHandler를 같은 hadler명으로 작성합니다.

args에는 WEB에서 APP으로 넘겨준 데이터를 확인할 수 있습니다.

 

2. evaluateJavascript (APP -> WEB)

DART 코드

_controller.evaluateJavascript(source: 'JSFunction명( "$전달할 값" )');

 

APP에서 WEB의 javascript를 실행시키는건 더 간단합니다.

위 코드블럭과 같이 javascript명을 명시하고 뒤에 WEB으로 전달할 값을 넣어줍니다.

WEB 코드

/* APP -> WEB */
function JSFunction명(전달받은 값){

    console.log(전달받은 값);

}

 

WEB에서는 기존 javascript function을 사용하듯이 코드를 작성하고 전달받은 값을 사용하시면 됩니다.

3. 예시 (QR코드 스캐너 실행)

 

아래 이미지와 같이 WEB에서 QR코드 버튼을 눌렀을 때 APP의 QR코드 스캐너가 실행되어야합니다.

버튼을 누르면 QR코드 스캐너가 실행되어야 함.

WEB 코드

/* WEB -> APP */
function webToApp_qrScan() {
		
    //플러터 웹뷰가 준비되었을 경우
    if (isFlutterInAppWebViewReady) {
        var args = '';
        window.flutter_inappwebview.callHandler('qrScan', ...args);
    }

}

/* APP -> WEB */
//APP에서 전달받을 QR코드 인식 결과
function appToWeb_qrResult(rsltUrl){

    var labelNo = "";
    var labelNoIdx = rsltUrl.indexOf("labelNo=") + 8;

    labelNo = rsltUrl.substr(labelNoIdx);

    $("#labelNo").val(labelNo);

    selectLabelInfo('06'); // 06 : //검사자앱 QR조회

}

 

DART 코드 

void scanData() async {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => const QRScanner())).then((value){
      //QR코드 스캔이 끝나면 WEB의 appToWeb_qrResult function을 실행시켜 결과값 전달
      _controller.evaluateJavascript(source: 'appToWeb_qrResult( "$value" )');
    });
}

@override
Widget build (BuildContext context){
  Size deviceSize = MediaQuery.of(context).size;
  return InAppWebView(
    initialUrlRequest: url,
    onWebViewCreated: (controller) {
      _controller = controller;
      
      controller.addJavaScriptHandler(
          handlerName: 'qrScan', callback: (args) {
        return {
          scanData()
        };
      });
    },
  );
}