js 交互在Flutter 中使用 webview_flutter

时间:2023-03-20 IAM17 人气:0

正文

已经有很多关于 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 =&gt;
          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://jb51.net
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 页面，还可以执行其它功能，比如调取相机。

总结

通过两个示例演示了页面与 flutter 通信的 3 种方式

flutter 拦截 url
flutter 设置 JavaScriptChannel
flutter 向页面注入 js

向页面注入 js 需要等页面加载完成后再注入。注入 js 的能力非常强大的。几乎可以对页面做任意修改。比如

删除页面中不想要的部分
修改页面的样式
增加页面的功能，比如给页面增加一个按钮，点按钮跳到原生页面，就好像原来的页面就有这个功能一样。

删除页面中不想要的部分，这是有实际意义的。页面都会有页头，这可能和 app 的头部冲突。有了注入 js 这个利器，可以在不修改页面的情况下，直接在 app 中不显示页头。

修改页面样式，这个你懂的，既然能注入 js ，也就是能注入 css 了。相比于直接用 js 修改页面样式，注入 css 的方式更加容易维护。

当然了，凡事有利有弊，不要滥用这个功能。在 app 单方面修改页面，将来页面修改的时候可能会翻车，即使做好沟通，也会给页面开发造成限制或麻烦，所以如何做一定要权衡各方面的得失。

app 不像页面那样可以随时修改，所以要优先考虑让页面实现功能，尽量把控制权交给页面（说两遍了，因为很重要）。js 注入这种操作不是万不得已不要做，把它做为最后的选项。

最后说一点，示例中为了方便演示用 loadHtmlString，实际应用中一般是用 loadRequest 加载网址。

~~loadHtmlString(htmlString)~~ loadRequest(Uri.parse('https://juejin.cn'))

加载全部内容