使用過人氣很高的flutter_webview_plugin贪庙，但是缺少2個重要的功能。也在打開多個WebView時會出錯库车。

• 不能在JS中調(diào)用Flutter方法
• 不能在H5進入某個URL之前攔截

雖然該插件不夠完整毁习，但是使用起來很方便歼指，封裝了很多功能。如果交互不多可以用該插件评姨。

官方的 webview_flutter

之后使用官方的webview_flutter插件难述。

附：

在老版本的 Flutter WebView有在Android中無法調(diào)彈出鍵盤的問題，在webview_flutter Version 0.3.10+2中已經(jīng)修復(fù)該BUG，使用最新版的Flutter SDK (flutter _v1.7.8+hotfix.3-stable)

見GitHub Issue：issues/19718

真的很好用胁后。官方的Example也很到位哈硫眯。

JS調(diào)用Flutter

使用實例：

    // 定義方法
    JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
            name: 'Toaster',
            onMessageReceived: (JavascriptMessage message) {
            Scaffold.of(context).showSnackBar(
                SnackBar(content: Text(message.message)),
            );
            });
    }
    
    // 暴露給WebView
    WebView(
        // ... 略
        javascriptChannels: <JavascriptChannel>[
            _toasterJavascriptChannel(context),
        ].toSet(),
    )

    // JS調(diào)用方法
    Toaster.postMessage('彈彈樂');

Flutter調(diào)用JS

    WebViewController _webViewController;

    WebView(
        // ... 略
        javascriptMode: JavascriptMode.unrestricted, // 使用JS沒限制
        onWebViewCreated: (WebViewController webViewController) {
            // 在WebView創(chuàng)建完成后會產(chǎn)生一個 webViewController
            _webViewController = webViewController;
        },
    )

    // 之后可以調(diào)用 _webViewController 的 evaluateJavascript 屬性來注入JS
    _webViewController.evaluateJavascript("Toaster.postMessage('彈彈樂');");

攔截URL

    WebView(
        navigationDelegate: (NavigationRequest request) {
            // 判斷URL
            if (request.url.startsWith('https://www.baidu.com')) {
                // 做一些事情
                // 阻止進入登錄頁面
                return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
        },
    );

GitHub實戰(zhàn)鏈接