오늘은 웹과 앱에서의 JS통신을 구현해봤다.
html과 javascript까지 봐야하니까.... 너무 어렵다................... 하지만 그래도 해야하기에 (T^T)
html 파일 작성
<!DOCTYPE html>
<html>
<head><title>Navigation Delegate Example</title>
<script>
function changeColor() {
var colors = ["black", "red", "green"];
var randonNumber = Math.floor(Math.random() * 3);
var myDiv = document.getElementById("container_box");
myDiv.style.backgroundColor = colors[randonNumber];
try { colorChanged.postMessage(colors[randonNumber]); } catch (err) {}
}
function webToApp(msg) {
alert(msg);
try { webToAppChange.postMessage(msg); } catch (err) {}
}
function appToWeb(color) {
alert("aa");
var myDiv = document.getElementById("container_box");
myDiv.style.backgroundColor = color;
}
</script>
<style type="text/css">
#btn_color {
display: block;
margin: auto;
}
#container_box {
height: 200px;
width: 400px;
border: 1px solid #000 ;
margin: 0 auto;
}
</style>
</head>
<body>
<p>
The navigation delegate is set to block navigation to the youtube website.
</p>
<div id="container_box"></div>
</br>
<ul>
<button id="btn_webToApp" onclick="webToApp('웹페이지에서 앱 전달')">webToApp</button>
<button id="btn_appToWeb" onclick="appToWeb('black')">appToWeb</button>
</ul>
</br>
<ul>
<ul><a href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
<ul><a href="https://www.google.com/">https://www.google.com/</a></ul>
</ul>
</body>
</html>여기서 WebToApp function은 alert를 띄워주고, 로그를 뿌려준다.
appToWeb function은 alert를 띄워주고, container_box id를 가진 div의 backgroundcolor를 변경해준다.
320x100
main.dart에 index.html load하기
void _onNavigationDelegateExample(WebViewController controller, BuildContext context) async {
String _fileText = await rootBundle.loadString('assets/index.html');
final String contentBase64 = base64Encode(const Utf8Encoder().convert(_fileText));
await controller.loadUrl('data:text/html;base64,$contentBase64');
}다음과 같이 rootBundle.loadString을 사용해서 로드해주면 된다. 이때, async 함수에서 행해져야한다!
javaScriptChannels 등록하기
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView example'),
// This drop down menu demonstrates that Flutter widgets can be shown over the web view.
actions: <Widget>[
NavigationControls(_controller.future),
SampleMenu(_controller.future),
],
),
body: Builder(builder: (BuildContext context) {
return WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
onProgress: (int progress) {
print("WebView is loading (progress : $progress%)");
},
javascriptChannels: <JavascriptChannel>{
_webToAppChange(context),
},
);
}),
);
}
JavascriptChannel _webToAppChange(BuildContext context) {
return JavascriptChannel(
name: 'webToAppChange',
onMessageReceived: (JavascriptMessage message) {
// ignore: deprecated_member_use
print("webToAppChange 메시지 : ${message.message}");
});
}위 코드에서는 웹에서 메시지를 받아 로그를 뿌려주는 코드이다.
controller.evaluateJavascript('appToWeb("red")');다음은 javascript를 실행하는 코드이다. index.html의 appToWeb function을 실행시켜준다.
뭐 음 navigation 버튼 만들어서 onPressed시 다음과 같이 작성해 주면 될 것 같다.
IconButton(
icon: const Icon(Icons.replay),
onPressed: !webViewReady
? null
: () {
controller.evaluateJavascript('appToWeb("red")');
},
)
끝@@@!!!!!
※ ios에서는.. javascript의 alert()가 안먹히는것같다..
안드로이드에서는 잘 되는데 ios에서는 안된다! 저거만!
Flutter WebView javascript call
class _MyPagetate extends State { WebViewController _webViewContro...
blog.naver.com
320x100
'프로그래밍 > Flutter-Dart' 카테고리의 다른 글
| [Flutter] wifi connect 정보 (0) | 2021.03.22 |
|---|---|
| [Flutter] Webview JavaScript Handler 등록 (0) | 2021.03.22 |
| [Flutter] IOS 앱 구동 (2) (0) | 2021.03.19 |
| [Flutter] IOS 앱 구동 (1) (0) | 2021.03.19 |
| [Flutter] Flutter http (0) | 2021.03.18 |
댓글