flutter WebView flutter js 互调

2024年1月9日 327次阅读 来源: 诗意的活着

通过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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞