目标
- 实现flutter 调用 js
- Js 返回结果
项目实现
call_js_page.dart通过webview_flutter_plus 来加载 index.html，使用js交互。
index.html
<html>
<head>
</head>
<body>
<h1 id="title">call js</h1>
<script type="text/javascript">
function fromFlutter(title){
document.getElementById("title").innerHTML = title;
sendBack();
}
function sendBack() {
messageHandler.postMessage("Hello from JS");
}
</script>
</body>
</html>
在js块中有两个方法
- fromFlutter：此方法在flutter调用并传递title参数
- sendBack：此方法返回数据给flutter
call_js_page.dart
class CallJsPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _CallJsPageState();
}
}
class _CallJsPageState extends State<CallJsPage> {
WebViewPlusController? _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("flutter web call js"),
),
body: WebViewPlus(
onWebViewCreated: (controller) {
_controller = controller;
controller.loadUrl('assets/index.html');
},
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {
JavascriptChannel(
name: "messageHandler",
onMessageReceived: (JavascriptMessage message) {
print(message);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(message.message),
));
})
},
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
_controller?.webViewController
.evaluateJavascript("fromFlutter('from flutter')");
},
),
);
}
}
怎样调用index.html的fromFlutter方法
通过_controller?.webViewController.evaluateJavascript 方法
_controller?.webViewController
.evaluateJavascript("fromFlutter('from flutter')");
怎样接收index.html页面的数据
通过JavascriptChannel 来接收，注意下name 要一致。
javascriptChannels: {
JavascriptChannel(
name: "messageHandler",
onMessageReceived: (JavascriptMessage message) {
print(message);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(message.message),
));
})
},
效果图
flutter_web_call_js.gif
源码
参考
https://pub.dev/packages/webview_flutter_plus
https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2
https://medium.com/flutter-community/js-native-communication-bridge-in-flutter-f94b65913df1
网友评论