[플러터] iframe에서 데이터 가져오기 webViewx
https://stackoverflow.com/questions/53689662/flutter-webview-two-way-communication-with-javascript
https://junspapa-itdev.tistory.com/55
https://velog.io/@gchomu/Flutter-Future-value-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
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 로 받기 때문인것 같다 (잘모르겟음)