在 Flutter 中使用 webview_flutter 4.0 | js 交互

IAM17前端 2023-04-05 原文

大家好，我是 17。

已经有很多关于 Flutter WebView 的文章了，为什么还要写一篇。两个原因：

Flutter WebView 是 Flutter 开发的必备技能
现有的文章都是关于老版本的，新版本 4.x 有了重要变化，基于 3.x 的代码很多要重写。

WebView 的文章分两篇

本篇讲 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://juejin.cn
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'))

本文到这里就结束了。谢谢观看！

有关在 Flutter 中使用 webview_flutter 4.0 | js 交互的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 在 Ruby 中使用匿名模块 - 2
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？最佳答案三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2
我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po