Flutter项目中添加Webview（四）—— 使用WebViewController

好的，请稍等，以下是根据您的输入使用 AI 螺旋创作器生成的专业文章：

WebViewController的其他方法

我们已经使用了一部分WebViewController的方法，下面列举一些常用的方法。

• loadData ：使用data加载一个网页；
• evaluateJavascript ：执行一段js脚本；
• canGoBack ：返回当前网页是否可后退；
• canGoForward ：返回当前网页是否可前进；
• goBack ：WebView后退到上一个历史页面；
• goForward ：WebView前进到下一个历史页面；
• reload ：WebView重新加载当前网页；
• clearCache ：WebView清除缓存；
• getTitle ：获取WebView标题；
• getProgress ：获取WebView加载进度；
• getPlatformVersion ：获取Flutter版本；

Flutter在iOS和Android上创建的WebView默认都会开启历史记录功能，如果我们在项目中需要禁用WebView历史记录，那么可以使用creationParams方法。比如禁用历史记录功能的代码：

WebView(
      initialUrl: 'https://flutter.dev',
      creationParams: CreationParams(
        allowFileAccessFromFileURLs: true,
        cacheEnabled: true,
        clearHistory: true,
      ),
    );

WebViewController的方法清单

方法
addJavaScriptChannel	添加JavaScript通道
clearCache	清除缓存
clearCookies	清除Cookie
canGoBack	返回当前网页是否可后退
canGoForward	返回当前网页是否可前进
loadData	使用data加载一个网页
loadFile	加载本地文件
loadHtmlString	加载一个HTML字符串
loadUrl	加载一个URL
reload	重新加载当前网页
goBack	WebView后退到上一个历史页面
goForward	WebView前进到下一个历史页面
getTitle	获取WebView标题
getProgress	获取WebView加载进度
evaluateJavascript	执行一段js脚本
runJavascriptReturningResult	执行一段js脚本并返回结果
toImage	把WebView截图

在Flutter中使用WebViewController进行页面交互

1、从JavaScript端调用Flutter的原生方法

Flutter中使用WebViewController对象调用JavaScript代码，可以通过evaluateJavascript 方法，也可以通过addJavaScriptChannel方法与JavaScript进行交互。当Flutter调用JavaScript代码时，JavaScript代码可以通过window.flutter_inappwebview调用Flutter的原生方法，实现JavaScript和Flutter的交互。下面我们通过几个案例来演示如何通过JavaScript调用Flutter的原生方法。

2、获取当前页面的URL

以下JavaScript代码获取当前页面的URL：

window.flutter_inappwebview.callHandler('getCurrentUrl').then((url) => {
  console.log(url);
});

Flutter端接收JavaScript的调用：

final webview = WebView(
  initialUrl: 'https://flutter.dev',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (webViewController) {
    webViewController.addJavaScriptHandler('getCurrentUrl', (args) async {
      final url = await webViewController.getUrl();
      return url;
    });
  },
);

3、获取当前页面标题

JavaScript代码：

window.flutter_inappwebview.callHandler('getTitle').then((title) => {
  console.log(title);
});

Flutter端接收JavaScript的调用：

final webview = WebView(
  initialUrl: 'https://flutter.dev',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (webViewController) {
    webViewController.addJavaScriptHandler('getTitle', (args) async {
      final title = await webViewController.getTitle();
      return title;
    });
  },
);

4、在Flutter中注入JavaScript代码

我们在Flutter中可以使用WebViewController对象的evaluateJavascript 方法，来注入JavaScript代码。比如以下代码，在JavaScript中定义了一个函数，然后在Flutter中通过evaluateJavascript方法执行这个函数：

webViewController.evaluateJavascript('
  function multiply(a, b) {
    return a * b;
  }
');

在Flutter中调用JavaScript方法：

webViewController.evaluateJavascript('multiply(3, 5)').then((value) {
  print(value); // 输出15
});

本文主要介绍了WebViewController，包括它的使用和一些常用的方法。通过WebViewController，我们可以控制WebView的加载、后退、前进、刷新等操作，还可以通过它与JavaScript进行交互。更多关于WebViewController的用法，可以参考官方文档。