js 互動在Flutter 中使用 webview_flutter

2023-02-14 06:02:17

正文

已經有很多關於 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 = '''
&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;webview demo | IAM17&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, 
  maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /&gt;
&lt;style&gt;
*{
  margin:0;
  padding:0;
}
body{
   background:#BBDFFC;  
   display:flex;
   justify-content:center;
   align-items:center;
   height:100px;
   color:#C45F84;
   font-size:20px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;html&gt;
&lt;body&gt;
&lt;div &gt;大家好，我是 17&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
''';
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&lt;MyWebView&gt; createState() =&gt; _MyWebViewState();
}
class _MyWebViewState extends State&lt;MyWebView&gt; {
  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

&lt;body&gt;
&lt;div class="content"&gt;大家好，我是 17&lt;/div&gt;
&lt;script&gt;
    const resizeObserver = new ResizeObserver(entries =&gt;
          Report.postMessage(document.scrollingElement.scrollHeight))
    resizeObserver.observe(document.body)
&lt;/script&gt;
&lt;/body&gt;

如果WebView 不支援 ResizeObserver 可以直接在合適的時機呼叫 Report.postMessage(document.scrollingElement.scrollHeight))

dart 程式碼中

增加一個變數 height ，初始值為 0。
增加 ScriptChannel，注意名字和前面 script 中的名字必須一樣，本例中名字叫 Report
用 SizedBox 替換 Expanded，限定 WebViewWidget 的高度。

class _MyWebViewState extends State&lt;MyWebView&gt; {
  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://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 頁面，還可以執行其它功能，比如調取相機。