flutter WebView flutter js 互调

通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试。

1.引入webview_flutter: ^0.3.5+2   这个是官网推荐用的, 还有一个好像api 里没有互调的操作。
  • onWebViewCreated:在WebView创建完成后调用,只会被调用一次;
  • initialUrl:初始load的url;
  • javascriptMode:JS执行模式(是否允许JS执行);
  • javascriptChannels:JS和Flutter通信的Channel;
  • navigationDelegate:路由委托(可以通过在此处拦截url实现JS调用Flutter部分);
  • gestureRecognizers:手势监听;
  • onPageFinished:WebView加载完毕时的回调。import ‘dart:async’;
 js 调用flutter 有俩种方式
1.使用 javascriptChannels

 

js部分:
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
   Toast.postMessage("JS调用了Flutter"); // 使用postMessage toast 是定义好的名称,在接受的时候要拿这个name 去接受
}

flutter部分:
javascriptChannels: <JavascriptChannel>[ //javascriptChannels这个是api提供的互调的方法,
  _alertJavascriptChannel(context),
].toSet(),
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}

 

第二种方法:通过navigationDelegate拦截url
document.location = "js://webview?arg1=111&args2=222"; 通过跳转链接 js:/webview 这个定义好之后
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('js://webview')) { //拦截以js://webview 开始的链接 说明页面执行了这个链接的跳转操作,也就是页面按钮被点击了。那么执行相关的flutter操作。
    showToast('JS调用了Flutter By navigationDelegate'); 
print('blocking navigation to $request}');
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new testNav()));
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate; //这个是必须有的,NavigationDecision.prevent:阻止路由替换;NavigationDecision.navigate:允许路由替换。
},
flutter调用js:

_controller.future.then((controller) {
controller.evaluateJavascript('callJS("visible")') //参数 是要调用的js 函数名
.then((result) {
  print(result);
 });
});

function callJS(message){ document.getElementById("p1").style.visibility = message; } //控制div 的显示以及隐藏。
    原文作者:诗意的活着
    原文地址: https://www.cnblogs.com/wupeng88/p/11095992.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞