js 交互在Flutter 中使用 webview_flutter
作者：IAM17 发布时间：2023-07-20 22:40:14
已经有很多关于 Flutter WebView 的文章了，为什么还要写一篇。两个原因：
Flutter WebView 是 Flutter 开发的必备技能
现有的文章都是关于老版本的，新版本 4.x 有了重要变化，基于 3.x 的代码很多要重写。
WebView 的文章分两篇
在 Flutter 中使用 webview_flutter 4.0 | js 交互 （本文）
Flutter WebView 性能优化，让 h5 像原生页面一样优秀
本篇讲 js 交互。首先了解下 4.0 有哪些重大变化。
最大的变化就是 WebView 类已被删除，其功能已拆分为 WebViewController 和 WebViewWidget。让我们可以提前初始化 WebViewController。
Android 的 PlatformView 的实现目前不再可配置。它在版本 23+ 上使用 Texture Layer Hybrid Compositiond，在版本 19-23 回退到 Hybrid Composition。
第 2 条的变化让我们不需要再写判断 android 的代码了。
还有 api 的变化。总的来说，让我们的编码更加容易了。
写本文的时候，Flutter WebView 的版本是 4.0.2
环境准备
虽然文档上写的是支持 addroid SDK 19+ or 20+， 但我们最好写 21 或更高，不是说会影响 Flutter WebView 的使用，而是太低了会影响其它插件的使用。如果能写 23 就更好了，这样可以用 Texture Layer Hybrid Compositiond 了。
android {
defaultConfig {
minSdkVersion 21
}
}
iOS 支持 9.0 以上，新版本的 flutter 默认配置是 ios 11.0 ，所以我们按 Flutter 默认的配置就好。
安装 webview_flutter
flutter pub add webview_flutter
最简示例
一般举例都是先发一个 hello world，咱们也发一个最简单的，先跑起来。
完整代码，贴到 main.dart 就能运行
引用 webview_flutter 插件
创建 controller
用 WebViewWidget 展示内容
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
const htmlString = '''
<!DOCTYPE html>
<head>
<title>webview demo | IAM17</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
<style>
*{
margin:0;
padding:0;
}
body{
background:#BBDFFC;
display:flex;
justify-content:center;
align-items:center;
height:100px;
color:#C45F84;
font-size:20px;
}
</style>
</head>
<html>
<body>
<div >大家好，我是 17</div>
</body>
</html>
''';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: SafeArea(child: MyWebView()),
));
}
}
class MyWebView extends StatefulWidget {
const MyWebView({super.key});
@override
State<MyWebView> createState() => _MyWebViewState();
}
class _MyWebViewState extends State<MyWebView> {
late final WebViewController controller;
double height = 0;
@override
void initState() {
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadHtmlString(htmlString);
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
children: [Expanded(child: WebViewWidget(controller: controller))],
);
}
}
执行代码，你将看到如下内容
WebView 内容的可以通过网址获取，但这样不方便演示各种效果，所以直接用 htmlString 替代了，效果是一样的。
默认情况下 javascript 是被禁用的。必须手动开启 setJavaScriptMode(JavaScriptMode.unrestricted)，否则对于绝大多数的网页都没法用了。
WebView 的小大
WebViewWidget 会尝试让自己获得最大高度和最大宽度，所以 WebView 必须放在有限宽度和有限高度的 Widget 中。一般会用 SizedBox 这样的容器把 WebView 包起来。但是 WebView 内容的高度是未知的，要如何设置 SizedBox 的 height 呢？
一种方案是 height 采用固定高度，如果 WebView 内容过多，可以用上下滑动的方式来查看所有内容。如果 WebView 的内容高度是变化的，用固定高度可能会产生大块空白，这个时候应该把 height 设置成 WebView 内容的高度。
那么问题来了，如何获得 WebView 内容的高度？最理想的情况是网页是自己能控制的，让网页自己报告高度。
网页自己报告高度
在 htmlString 中 增加 js
<body>
<div class="content">大家好，我是 17</div>
<script>
const resizeObserver = new ResizeObserver(entries =>
Report.postMessage(document.scrollingElement.scrollHeight))
resizeObserver.observe(document.body)
</script>
</body>
如果WebView 不支持 ResizeObserver 可以直接在合适的时机调用
Report.postMessage(document.scrollingElement.scrollHeight))
dart 代码中
增加一个变量 height ，初始值为 0。
增加 ScriptChannel，注意名字和前面 script 中的名字必须一样，本例中名字叫 Report
用 SizedBox 替换 Expanded，限定 WebViewWidget 的高度。
class _MyWebViewState extends State<MyWebView> {
late final WebViewController controller;
double height = 0;
@override
void initState() {
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('Report', onMessageReceived: (message) {
setState(() {
height = double.parse(message.message);
});
})
..loadHtmlString(htmlString);
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(height: height, child: WebViewWidget(controller: controller)),
],
);
}
}
修改 html 代码中的 body 的样式 height:100px 为 height:200px;，重新运行代码（restart，hot reload 不生效 ），发现 SizedBox 也变为 200px 高了。
无法修改页面
如果页面我们无权修改也没有办法协调修改，那就只能通过注入 js 方式获取了。
如果页面的高度只由静态 css 决定，可以简单的加一个小延时，直接获取高度即可。
controller.setNavigationDelegate(NavigationDelegate(
onPageFinished: (url) async {
await Future.delayed(Duration(milliseconds: 50));
var message = await controller.runJavaScriptReturningResult(
'document.scrollingElement.scrollHeight');
setState(() {
height =double.parse(message.toString());
});
},
));
如果页面加载完成后 js 又对页面进行了修改，这个时间就很难预估了。js 可以随时修改页面，导致高度改变，所以要想时时跟踪页面高度，只能靠监听。如果 webview 不支持 ResizeObserver，还可以用 setInterval。
void initState() {
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('Report', onMessageReceived: (message) {
var msgHeight = double.parse(message.message);
setState(() {
height = msgHeight;
});
})
..setNavigationDelegate(NavigationDelegate(
onPageFinished: (url) async {
// 注入 js
controller.runJavaScript(
'''const resizeObserver = new ResizeObserver(entries =>
Report.postMessage(document.scrollingElement.scrollHeight))
resizeObserver.observe(document.body)''');
},
))
..loadHtmlString(htmlString);
super.initState();
}
必须等到页面加载完成后再注入 js，否则页面文档还不存在，往哪里注入啊。
因为代码都在 dart 这边，免去了和页面开发沟通的成本。既使 WebView 加载的页面中可能还有链接，跳到另一个地址，js 注入的代码依然有效！
页面的高度可能会在很短时间内连续变化，我们可以只对最后一次的高度变化做更新，用 Timer 可以做到。页面高度要限制一个最大值，否则超出最大允许的高度就报错了。
可能你会觉得既然注入的方式这么多优点，不需要页面报告那种方式了，都用这种注入的方式就可以了。实际上每种方式都有它的利弊，不然我就不会介绍了。页面报告的方式在于灵活，想什么时候报告就什么时候报告，页面高度变化了，也可以不报告。在页面没有内容的时候可以先报告一个预估的高度，会让页面避免从 0 开始突然变高。尽量把主动权交给页面，因为页面是可以随时修改的，app 不能！
在网页中调用 Flutter 页面
拦截 url
url 以 /android 结尾时，跳到对应的原生页面。否则继续原来的请求。
onNavigationRequest: (request) {
if (request.url.endsWith('/android')) {
// 跳到原生页面
return NavigationDecision.prevent;
} else {
// 继续原来的请求
return NavigationDecision.navigate;
}
},
触发方式有两种
用 A 标签 <a href='/ios'>跳到 Flutter 页面</a>
用 js 跳转 window.location.href='完整页面地址'
用 js 跳转的地址一定是完整的页面地址。比如这样写都是可以的
https://aspxhome.com
aa:/bb
schema 可以自定义，但不能没有。这样写是无效的 /android
js 调用 JavaScriptChannel 定义的方法
先定义跳转的通道对象为 Jump
void initState() {
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('Jump', onMessageReceived: (message) {
//根据 message 信息跳转
})
..loadHtmlString(htmlString);
super.initState();
}
在页面中执行 Jump.postMessage('video');
实际上，flutter 拿到页面传过来的信息后，除了可以跳转到 flutter 页面，还可以执行其它功能，比如调取相机。
来源：https://juejin.cn/post/7196698315835260984
0
投稿猜你喜欢
Handler是什么？Handler 是一个可以实现多线程间切换的类，通过 Handler 可以轻松地将一个任务切换到 Handler 所在- 计数排序是非比较的排序算法，用辅助数组对数组中出现的数字计数，元素转下标，下标转元素计数排序优缺点优点：快缺点：数据范围很大，比较稀疏，会导
- 前言前不久遇到一个问题，是公司早期的基础库遇到的，其实很低级，但是还是记录下来。出错点是一个 IO 流的写入bug，我们项目会有一种专有的数
- 简介在上一篇文章中，我们列举了flutter中的所有layout类，并且详细介绍了两个非常常用的layout:Row和Column。掌握了上
- 错误示例，同一个类中使用异步方法：package com.xqnode.learning.controller;import com.fas
- 在Spring Boot Actuator中提供很多像health、metrics等实时监控接口，可以方便我们随时跟踪服务的性能指标。Spr
- 场景重现：1.微信小程序向后台发送请求 ——而后台web采用的springSecuriry没有token生成，就会拦截请求,，所以小编记录下
- 我们还是用一个小例子来看看自定义View和自定义属性的使用，带大家来自己定义一个带进度的圆形进度条，我们还是先看一下效果吧从上面可以看出，我
- 这篇文章主要介绍了Java如何把数组转换为ArrayList,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需
- ScriptControl接口属性名称类型备注AllowUIBOOL检测是否允许运行用户的接口元素。如果为False，则诸如消息框之类的界面
- 最近项目中遇到了华为虚拟按键适配的问题，主页是个RecylerView(如下图)，如果不做适配，在界面初始化完毕后，虚拟按键会遮挡页面或者空
- 这篇文章主要介绍了Java 使用Calendar类输出指定年份和月份的日历,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参
- 文件分割与合并是一个常见需求，比如：上传大文件时，可以先分割成小块，传到服务器后，再进行合并。很多高大上的分布式文件系统（比如：google
- 本文实例为大家分享了Android实现旋转动画的具体代码，供大家参考，具体内容如下旋转动画（可加速、减速）1、准备工作首先需要有一个用于旋转
- 1. 前言不知道小伙伴对于日期字段，在项目中都是如何处理的，是单独给每个字段都自定义日期格式还是做全局格式设置？这个我之前啊，是
- 这篇文章主要介绍了SpringMVC的执行流程及组件详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- 本文实例讲述了C#实现获取鼠标句柄的方法，分享给大家供大家参考。具体实现方法如下：一、调用user32.dll(1)引用using Syst
- 在日常的app使用中，我们会在android 的app中看见 热门标签等自动换行的流式布局，今天，我们就来看看如何自定义一个类似热门标签那样
- 一开始我就纳闷了，怎么调试都只是一个光溜溜的界面，右侧的工具栏都没有如图：就一个光秃秃的界面，什么都没有，这就对调试很不方便于是我就试了试各
- 最近遇到的一个场景,在一个被 @Transactional 注解的方法A中中调用了一个被 @Async 注解标记的方法B,由于方法B 在执行
