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 的显示以及隐藏。

flutter WebView flutter js 互调

猜你喜欢