js 交互在Flutter 中使用 webview_flutter

目录
  • 正文
  • 环境准备
  • 最简示例
  • WebView 的小大
    • 网页自己报告高度
    • 无法修改页面
  • 在网页中调用 Flutter 页面
    • 拦截 url
    • js 调用 JavaScriptChannel 定义的方法
  • 总结

正文

已经有很多关于 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'))

以上就是js 交互在Flutter 中使用 webview_flutter的详细内容，更多关于js 交互webview_flutter的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter WebView 预加载实现方法(Http Server)

    Flutter WebView 预加载实现方法(Http Server)

    目录 背景 分析 HttpServer 接下来? 资源配置 下载解压与本地存储 版本管理与更新 获取LocalServer Url并加载Webview 兜底措施 统一管理 展示与分析 总结 Demo 背景 WebView是在APP中,可以很方便的展示web页面,并且与web交互APP的数据.方便,并且更新内容无需APP发布新版本,只需要将最新的web代码部署完成,用户重新刷新即可. 在WebView中,经常能够听到的一个需求就是:减少首次白屏时间,加快加载速度.因为加载web页面,必然会受到网络

  • Android开发之Flutter与webview通信桥梁实现

    前言 最近业务有需求需要在flutter内使用webview进行内嵌H5进行展示,此时需要涉及到H5与flutter之间额通信问题.比如发送消息或者H5调用Flutter的相机等等 webview选型 这里我们使用官方维护的插件webview_flutter 如何通信? webview在初始化的时候需要向容器内注册一个全局方法供H5进行调用 WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unr

  • Flutter与WebView通信方案示例详解

    目录 背景 WebView组件选择 webview_flutter通信方式调研 Flutter -> WebView通信方式 问题 WebView -> Flutter通信方式 JSBridge通信模块封装 发布订阅 请求响应 代码实现——Flutter端 代码实现——web端 结尾 背景 最近做Flutter应用开发,需要通过WebView嵌入前端web页面,而且Flutter与前端web有数据通信的需求.因此,笔者关于Flutter与WebView通信方式做了调研,并封装了一套支持请求响应

  • Flutter webview与网页通讯交互实现

    目录 前言 预览 具体实现 flutter中使用ds_bridge 网页端使用dsbridge_flutter 总结 前言 在app开发中我们有JSBridge来实现app和网页端通讯,现参考JSBridge实现了Flutter webview和网页端通讯. 预览 flutter import 'package:ds_bridge/ds_bridge.dart'; class JsBridgeUtil { // 向H5调用接口 static executeMethod(flutterWebVie

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • js 交互在Flutter 中使用 webview_flutter

    js 交互在Flutter 中使用 webview_flutter

    目录 正文 环境准备 最简示例 WebView 的小大 网页自己报告高度 无法修改页面 在网页中调用 Flutter 页面 拦截 url js 调用 JavaScriptChannel 定义的方法 总结 正文 已经有很多关于 Flutter WebView 的文章了,为什么还要写一篇.两个原因: Flutter WebView 是 Flutter 开发的必备技能 现有的文章都是关于老版本的,新版本 4.x 有了重要变化,基于 3.x 的代码很多要重写. WebView 的文章分两篇 在 Flut

  • IOS中UIWebView、WKWebView之JS交互

    做客户端开发,肯定避免不了JS交互,于是自己对苹果接口做了个简易封装: JSExport-->UIWebView+Interaction.WKScriptMessageHandler -->WKWebView+Interaction以备以后使用. 代码非常简洁,见这里:https://github.com/V5zhou/JSInteraction.git 旧方式 旧的交互方式有通过UIWebViewDelegate实现的:JS与客户端定义好跳转页面参数,在将要跳转时捕获关键字,然后处理业务.

  • Android中WebView与Js交互的实现方法

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

  • Android中webview与JS交互、互调方法实例详解

    Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这

  • JS交互点击WKWebView中的图片实现预览效果

    Swift 4.0 WKWebView 1.注入js代码 (重点) func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let jsGetImages = "function getImages(){" + "var objs = document.getElementsByTagName(\"img\");" + "var imgScr =

  • IOS与网页JS交互详解及实例

     IOS与网页JS交互 随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值.比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器. 为此,我整理了三种最常用最便捷有效的OC与JS交互的方式,供大家学习交流. 第一种:JS给OC传值. 1. 技术方案:使用JavaScriptCore.framework框架 2. 使

  • C#的WEBBROWSER与JS交互小结

    本文实例总结了C#的WEBBROWSER与JS交互的方法.分享给大家供大家参考.具体实现方法如下: 一.实现WebBrowser内部跳转,阻止默认打开IE 1.引用封装好的WebBrowserLinkSelf.dll实现 复制代码 代码如下: public partial class MainWindow : Window {        private WebBrowser webBrowser = new WebBrowser();          public MainWindow()

  • node.js（express）中使用Jcrop进行图片剪切上传功能

    node.js（express）中使用Jcrop进行图片剪切上传功能

    需求说明 简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程 说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64

  • Android WebView使用方法详解 附js交互调用方法

    Android WebView使用方法详解 附js交互调用方法

    目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

  • Android WebView与JS交互全面详解(小结)

    Android WebView与JS交互全面详解(小结)

    Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5页面等,下面来看看这两是怎么交互的 目录 1.

随机推荐