[플러터] iframe에서 데이터 가져오기 webViewx

https://stackoverflow.com/questions/53689662/flutter-webview-two-way-communication-with-javascript

Flutter Webview two way communication with Javascript

https://junspapa-itdev.tistory.com/55

서로 다른 도메인을 사용하는 부모창과 자식창(iframe) 간 데이크 통신하는 방법(크로스도메인, pos

https://velog.io/@gchomu/Flutter-Future-value-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Flutter: Future value 사용하기

webViewx는 내부적으로 iframe을 만들어 화면에 보여준다

 

따라서 weViewx로 만든 웹뷰에서 뭔가 한 다음 데이터를 전달받기 위해서는 iframe에서 데이터 주고받기와 똑같은 방식으로 진행한다

 

             WebViewX(
                    width: 1000,
                    height: 800,
                    onWebViewCreated: (controller) {
                      webviewController = controller;
                      webviewController.loadContent(
                          dotenv.env['YOUR_NAVER_MAP_URL']!, SourceType.url);
                    }),
                TextButton(onPressed: (){
                    var markerData = webviewController.evalRawJavascript('window.getMarkerData()', inGlobalContext: true);
                    print("하위"+markerData.toString());
                    //html.window.postMessage("하위", "*");
                }, child: Text("getData"))

위와 같이 YOUR_NAVER_MAP_URL 이라는 url(env에 이 url주소가 기입되어 있다)을 서버로 해서 해당 서버에서 보내주는 html파일을 웹뷰 로써 보여준다

 

아래의 TextButton을 누르면 플러터 내부에 있는 index.hml의 getMarkerData()라는 함수를 실행하게된다

    var mapIframe

    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      mapIframe = document.getElementsByTagName('iframe')

      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });

    window.addEventListener('message', function(e){
      console.log(e.data)
      return "hi"
    })

    function getMarkerData(){
      if(mapIframe !=undefined){
        mapIframe[0].contentWindow.postMessage('getData', '*')
      }
    }

window.addEventListener('load' ... 부분이 아마 이 index.html이 모두 로딩되면 실행되는 듯 하다

이 안에서 iframe이라는 태그를 찾아서 dom객체로 저장한다

왜냐면 이 index.html안에서 console.log(document)해서 출력해보면 이 안에 iframe으로 화면이 들어가기 때문이다

 

다음은 iframe과 부모 window가 통신하는 법과 동일하다

    window.addEventListener("message", receiveParentMessage, false)

    function receiveParentMessage(e) {
        window.parent.postMessage({data : markerList}, "*")
    }

위는 YOUR_NAVER_MAP_URL로 받는 html의 자바스크립트 내용중 일부다

부모 window에서 이벤트를 이 iframe에게 보내면 receiveParentMessage함수를 실행

이 함수 내부에는 부모에게 메시지를 보내도록 되어 있다

 

부모에서 출력되는 값은 아래와 같다

플러터 안에 있는 index.html 에서는 전달한 리스트 데이터가 올바르게 출력되고 

dart 파일에서 받은 값은 Future<dynamic>으로 출력된다 이는 async 로 받기 때문인것 같다 (잘모르겟음)