flutter_inappwebview与其他WebView插件相比,它的功能非常丰富:有很多事件、方法和选项可以用来控制WebView。此外,前者没有提供很好的API文档,或者至少是文档不完整。相比之下,flutter_inappwebview 的每个特性几乎都有文档记录(可在pub.dev上查阅API参考)
flutter_inappwebview 方法介绍
| 方法名 | 介绍 |
|---|---|
| initialUrlRequest | 初始加载的URL |
| initialOptions | 将会使用的初始 WebView 选项 |
| initialData | 初始加载的 InAppWebViewInitialData,如 HTTP 字符串 |
| initialFile | 初始加载的资产文件(请查看“ 加载 assets 文件夹下的文件”一节) |
| onWebViewCreated | 创建 WebView 时调用 |
| gestureRecognizers | 指定 WebView 应该使用的划屏手势 |
| contextMenu | 包含自定义选项的快捷菜单 |
| onLoadStart | 当 WebView 开始加载某个 URL 时触发该事件 |
| onLoadStop | 当 WebView 完成一个 URL 的加载时触发该事件 |
| onLoadHttpError | 当 WebView 的主页收到 HTTP 错误时触发该事件 |
| onConsoleMessage | 当 WebView 收到一条 JavaScript 控制台消息(如 console.log、console.error )时触发该事件 |
| onProgressChanged | 网页的加载进度改变时调用 |
| shouldOverrideUrlLoading | 当一个 URL 将要在当前的 WebView 中加载时为宿主应用提供获取控制权的机会 |
| onDownloadStart | 当 WebView 识别到一个可下载的文件时触发该事件 |
| onReceivedHttpAuthRequest | 当 WebView 收到一个 HTTP 身份验证请求时触发该事件;默认行为是取消请求 |
| onReceivedServerTrustAuthRequest | 当 WebView 需要执行服务器信任认证(证书验证)时触发该事件 |
| onPrint | 当在 JavaScript 端调用 window.print() 时触发该事件 |
| onCreateWindow | 当 InAppWebView 请求宿主应用程序创建一个新窗口时触发该事件,例如当使用 target="_blank" 打开链接,或者当 JavaScript 端调用 window.open() 时 |
使用
第一步:导入flutter_inappwebview插件\
第二步:使用InAppWebView控件,加载网页或html网页文件
第三步:实现交互,交互有两种方式①我们可以Flutter直接写Js代码,当页面加载结束后直接添加Js中;②在Js中写好一个和方法Flutter来调用这个方法
- Flutter直接写Js代码
在
InAppWebView控件中,使用onProgressChanged方法,在方法中判断页面是否加载完成,加载完成后,调用控制器的evaluateJavascript方法将代码添加到html中。
- Js中写好一个和方法Flutter来调用这个方法
首先在Js中写好方法供Flutter调用,后在flutte中,调用InAppWebView控制器中的addJavaScriptHandler方法,实现Flutter调用Js方法,其中addJavaScriptHandler传入的参数有handlerName和callback,第一个为方法名(注与Js保持一直),第二个是一个方法可以接受到方法传来的值。