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.preventNavigationDecision.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 的顯示以及隱藏。