진짜 헤매고 헤매다가.. 겨우 성공한 javascript handler 등록하기!!!!
assets/index.html
<!DOCTYPE html>
<html>
<head><title>Example</title>
</head>
<body>
<h1>
TEST Example!!!
</h1>
<script>
window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
window.flutter_inappwebview.callHandler('handlerFoo')
.then(function(result) {
console.log(JSON.stringify(result));
window.flutter_inappwebview
.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}, result);
});
});
</script>
</body>
</html>위와 같이 handlerFoo, handlerFooWithArgs 2개의 핸들러를 호출한다!
callHandler('handlerFoo')는 main.dart로부터 결과를 받아 출력하는 부분이고,
callHAndler('handlerFooWithArgs')는 main.dart로 아규먼트들을 보내는 부분이다.!
pubspec.yaml
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_inappwebview:
flutter:
uses-material-design: true
assets:
- assets/index.html
320x100
html 파일 load하기
class _MyAppState extends State<MyApp> {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
useShouldOverrideUrlLoading: true,
mediaPlaybackRequiresUserGesture: false,
),
android: AndroidInAppWebViewOptions(
useHybridComposition: true,
),
ios: IOSInAppWebViewOptions(
allowsInlineMediaPlayback: true,
));
@override
Widget build(BuildContext context) {
...
InAppWebView(
key: webViewKey,
initialFile: 'assets/index.html',
initialOptions: options,
...
),
...
}
...
}위의 코드처럼 initialFlie로 index.html을 load해줬다.
handler 등록하기
InAppWebView(
key: webViewKey,
initialFile: 'assets/index.html',
...
onWebViewCreated: (controller) {
webViewController?.addJavaScriptHandler(handlerName:'handlerFoo', callback: (args) {
return {
'bar': 'bar_value', 'baz': 'baz_value'
};
});
webViewController?.addJavaScriptHandler(handlerName: 'handlerFooWithArgs', callback: (args) {
print(args);
});
},
...
)'handlerFoo' handler는 데이터를 리턴해서 javascript에서 뿌려주고,
'handlerFooWithArgs'는 받은 데이터를 출력해준다.
이로써 javascript에서 flutter handler를 호출하는 방법을 알아보았다.!!!
참고 : blog.codemagic.io/inappwebview-the-real-power-of-webviews-in-flutter/
320x100
'프로그래밍 > Flutter-Dart' 카테고리의 다른 글
| [Flutter] Login App (1) (0) | 2021.03.23 |
|---|---|
| [Flutter] wifi connect 정보 (0) | 2021.03.22 |
| [Flutter] WebView JS 통신 (2) | 2021.03.19 |
| [Flutter] IOS 앱 구동 (2) (0) | 2021.03.19 |
| [Flutter] IOS 앱 구동 (1) (0) | 2021.03.19 |
댓글