flutter编程
搜索
分类

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))],
   );
 }
}

执行代码，你将看到如下内容

js 交互在Flutter 中使用 webview_flutter

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://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

标签：Flutter,js交互,webview,flutter
0
投稿

猜你喜欢

  • Android 自定义对话框 showSetPwdDialog

    2022-04-25 22:55:00

  • Java中简单实用Quartz概述

    2021-09-09 14:16:30

  • 学习Winform分组类控件(Panel、groupBox、TabControl)

    2021-10-09 17:41:11

  • Jmeter非GUI模式运行分布式测试

    2021-11-08 12:42:07

  • 聊聊Redis二进制数组Bitmap

    2021-07-26 11:51:57

  • 详解Java面向对象编程之多态

    2023-08-28 19:17:06

  • Android人脸识别Demo竖屏YUV方向调整和图片保存(分享)

    2022-11-24 00:47:42

  • c# 二分查找算法

    2023-10-24 04:42:45

  • 详细了解C语言二叉树的建立与遍历

    2021-08-17 10:24:01

  • MyBatis-Plus结合Layui实现分页方法

    2023-07-10 13:23:09

  • Java并发编程面试之线程池

    2023-11-11 10:58:33

  • Commons beanutils组件简介

    2023-11-28 07:13:27

  • ZooKeeper入门教程一简介与核心概念

    2022-11-24 18:36:00

  • C#解析JSON实例

    2022-05-08 16:09:56

  • Android自定义View实现通讯录字母索引（仿微信通讯录）

    2023-05-14 04:34:22

  • Winform 显示Gif图片的实例代码

    2021-06-29 21:14:44

  • SpringBoot返回Json对象报错(返回对象为空{})

    2022-06-30 03:31:19

  • javaweb页面附件、图片下载及打开(实现方法)

    2023-11-25 05:33:44

  • SpringMVC中的handlerMappings对象用法

    2023-01-09 21:38:36

  • java中对List分段操作的实例

    2022-12-05 18:38:48
    • asp之家 软件编程 m.aspxhome.com