Flutter与Js交互(flutter_inappwebview)

4,521 阅读2分钟

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插件\
image.png

第二步:使用InAppWebView控件,加载网页或html网页文件
image.png

image.png

第三步:实现交互,交互有两种方式①我们可以Flutter直接写Js代码,当页面加载结束后直接添加Js中;②在Js中写好一个和方法Flutter来调用这个方法

  1. Flutter直接写Js代码 在InAppWebView控件中,使用onProgressChanged方法,在方法中判断页面是否加载完成,加载完成后,调用控制器的evaluateJavascript方法将代码添加到html中。

image.png

image.png

  1. Js中写好一个和方法Flutter来调用这个方法
    首先在Js中写好方法供Flutter调用,后在flutte中,调用InAppWebView控制器中的addJavaScriptHandler方法,实现Flutter调用Js方法,其中addJavaScriptHandler传入的参数有handlerNamecallback,第一个为方法名(注与Js保持一直),第二个是一个方法可以接受到方法传来的值。

image.png