本文采用的 webview 插件为 flutter官方维护的 webview_Flutter
关于webview与js的交互就分为两部分: Flutter 调用 js, js 调用 Flutter
开始之前我们先来熟悉下官方提供的Api
- onWebViewCreated:在WebView创建完成后调用,只会被调用一次;
- initialUrl:初始load的url;
- javascriptMode:JS执行模式(是否允许JS执行);
- javascriptChannels:JS和Flutter通信的Channel;
- navigationDelegate:路由委托(可以通过在此处拦截url实现JS调用Flutter部分);
- gestureRecognizers:手势监听;
- onPageFinished:WebView加载完毕时的回调
js 调用 Flutter
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Ad',
onMessageReceived: (JavascriptMessage message) {
Navigator.push(context, DialogRouter(WhiteMyPopup(
title:' hello',
middleContent: Container(
child: Text('我跳转了广告了'),
),
)));
});
}
WebView(
javascriptChannels: <JavascriptChannel>[
_alertJavascriptChannel(context),
].toSet(),
);
FLutter 调用 Js
在WebView创建完成之后,我们可以拿到一个WebViewController,通过它的evaluateJavascript()方法,我们可以执行JS语句:
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
······
floatingActionButton: FloatingActionButton(
onPressed: () {
_controller
?.evaluateJavascript('callJS("visible")')
?.then((result) {
// You can handle JS result here.
});
},
child: Text('call JS'),
),
<p id="p1" style="visibility:hidden;">
Flutter 调用了 JS.
</p>
function callJS(message){
document.getElementById("p1").style.visibility = message;
}
当我们点击Flutter的按钮的时候就会触发js的方法了;
有个需要注意的点, 如果我们需要接受js传递的参数的话, 在android上需要进行json解析