js?交互在Flutter?中使用?webview_flutter
正文
已經(jīng)有很多關(guān)于 Flutter WebView 的文章了，為什么還要寫一篇。兩個(gè)原因：
- Flutter WebView 是 Flutter 開發(fā)的必備技能
- 現(xiàn)有的文章都是關(guān)于老版本的，新版本 4.x 有了重要變化，基于 3.x 的代碼很多要重寫。
WebView 的文章分兩篇
- 在 Flutter 中使用 webview_flutter 4.0 | js 交互 （本文）
- Flutter WebView 性能優(yōu)化，讓 h5 像原生頁面一樣優(yōu)秀
本篇講 js 交互。首先了解下 4.0 有哪些重大變化。
- 最大的變化就是 WebView 類已被刪除，其功能已拆分為 WebViewController 和 WebViewWidget。讓我們可以提前初始化 WebViewController。
- Android 的 PlatformView 的實(shí)現(xiàn)目前不再可配置。它在版本 23+ 上使用 Texture Layer Hybrid Compositiond，在版本 19-23 回退到 Hybrid Composition。
第 2 條的變化讓我們不需要再寫判斷 android 的代碼了。
還有 api 的變化?？偟膩碚f，讓我們的編碼更加容易了。
寫本文的時(shí)候，F(xiàn)lutter WebView 的版本是 4.0.2
環(huán)境準(zhǔn)備
雖然文檔上寫的是支持 addroid SDK 19+ or 20+， 但我們最好寫 21 或更高，不是說會(huì)影響 Flutter WebView 的使用，而是太低了會(huì)影響其它插件的使用。如果能寫 23 就更好了，這樣可以用 Texture Layer Hybrid Compositiond 了。
android {
defaultConfig {
minSdkVersion 21
}
}
iOS 支持 9.0 以上，新版本的 flutter 默認(rèn)配置是 ios 11.0 ，所以我們按 Flutter 默認(rèn)的配置就好。
安裝 webview_flutter
flutter pub add webview_flutter
最簡(jiǎn)示例
一般舉例都是先發(fā)一個(gè) hello world，咱們也發(fā)一個(gè)最簡(jiǎn)單的，先跑起來。
完整代碼，貼到 main.dart 就能運(yùn)行
- 引用 webview_flutter 插件
- 創(chuàng)建 controller
- 用 WebViewWidget 展示內(nèi)容
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))],
);
}
}
執(zhí)行代碼，你將看到如下內(nèi)容
WebView 內(nèi)容的可以通過網(wǎng)址獲取，但這樣不方便演示各種效果，所以直接用 htmlString 替代了，效果是一樣的。
默認(rèn)情況下 javascript 是被禁用的。必須手動(dòng)開啟 setJavaScriptMode(JavaScriptMode.unrestricted)，否則對(duì)于絕大多數(shù)的網(wǎng)頁都沒法用了。
WebView 的小大
WebViewWidget 會(huì)嘗試讓自己獲得最大高度和最大寬度，所以 WebView 必須放在有限寬度和有限高度的 Widget 中。一般會(huì)用 SizedBox 這樣的容器把 WebView 包起來。但是 WebView 內(nèi)容的高度是未知的，要如何設(shè)置 SizedBox 的 height 呢？
一種方案是 height 采用固定高度，如果 WebView 內(nèi)容過多，可以用上下滑動(dòng)的方式來查看所有內(nèi)容。如果 WebView 的內(nèi)容高度是變化的，用固定高度可能會(huì)產(chǎn)生大塊空白，這個(gè)時(shí)候應(yīng)該把 height 設(shè)置成 WebView 內(nèi)容的高度。
那么問題來了，如何獲得 WebView 內(nèi)容的高度？最理想的情況是網(wǎng)頁是自己能控制的，讓網(wǎng)頁自己報(bào)告高度。
網(wǎng)頁自己報(bào)告高度
在 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 可以直接在合適的時(shí)機(jī)調(diào)用
Report.postMessage(document.scrollingElement.scrollHeight))
dart 代碼中
- 增加一個(gè)變量 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;，重新運(yùn)行代碼（restart，hot reload 不生效 ），發(fā)現(xiàn) SizedBox 也變?yōu)?200px 高了。
無法修改頁面
如果頁面我們無權(quán)修改也沒有辦法協(xié)調(diào)修改，那就只能通過注入 js 方式獲取了。
如果頁面的高度只由靜態(tài) css 決定，可以簡(jiǎn)單的加一個(gè)小延時(shí)，直接獲取高度即可。
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 又對(duì)頁面進(jìn)行了修改，這個(gè)時(shí)間就很難預(yù)估了。js 可以隨時(shí)修改頁面，導(dǎo)致高度改變，所以要想時(shí)時(shí)跟蹤頁面高度，只能靠監(jiān)聽。如果 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，否則頁面文檔還不存在，往哪里注入啊。
因?yàn)榇a都在 dart 這邊，免去了和頁面開發(fā)溝通的成本。既使 WebView 加載的頁面中可能還有鏈接，跳到另一個(gè)地址，js 注入的代碼依然有效！
頁面的高度可能會(huì)在很短時(shí)間內(nèi)連續(xù)變化，我們可以只對(duì)最后一次的高度變化做更新，用 Timer 可以做到。頁面高度要限制一個(gè)最大值，否則超出最大允許的高度就報(bào)錯(cuò)了。
可能你會(huì)覺得既然注入的方式這么多優(yōu)點(diǎn)，不需要頁面報(bào)告那種方式了，都用這種注入的方式就可以了。實(shí)際上每種方式都有它的利弊，不然我就不會(huì)介紹了。頁面報(bào)告的方式在于靈活，想什么時(shí)候報(bào)告就什么時(shí)候報(bào)告，頁面高度變化了，也可以不報(bào)告。在頁面沒有內(nèi)容的時(shí)候可以先報(bào)告一個(gè)預(yù)估的高度，會(huì)讓頁面避免從 0 開始突然變高。盡量把主動(dòng)權(quán)交給頁面，因?yàn)轫撁媸强梢噪S時(shí)修改的，app 不能！
在網(wǎng)頁中調(diào)用 Flutter 頁面
攔截 url
url 以 /android 結(jié)尾時(shí)，跳到對(duì)應(yīng)的原生頁面。否則繼續(xù)原來的請(qǐng)求。
onNavigationRequest: (request) {
if (request.url.endsWith('/android')) {
// 跳到原生頁面
return NavigationDecision.prevent;
} else {
// 繼續(xù)原來的請(qǐng)求
return NavigationDecision.navigate;
}
},
觸發(fā)方式有兩種
- 用 A 標(biāo)簽 <a href='/ios'>跳到 Flutter 頁面</a>
- 用 js 跳轉(zhuǎn) window.location.href='完整頁面地址'
用 js 跳轉(zhuǎn)的地址一定是完整的頁面地址。比如這樣寫都是可以的
- https://jb51.net
- aa:/bb
schema 可以自定義，但不能沒有。這樣寫是無效的 /android
js 調(diào)用 JavaScriptChannel 定義的方法
先定義跳轉(zhuǎn)的通道對(duì)象為 Jump
void initState() {
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('Jump', onMessageReceived: (message) {
//根據(jù) message 信息跳轉(zhuǎn)
})
..loadHtmlString(htmlString);
super.initState();
}
在頁面中執(zhí)行 Jump.postMessage('video');
實(shí)際上，flutter 拿到頁面?zhèn)鬟^來的信息后，除了可以跳轉(zhuǎn)到 flutter 頁面，還可以執(zhí)行其它功能，比如調(diào)取相機(jī)。
總結(jié)
通過兩個(gè)示例演示了頁面與 flutter 通信的 3 種方式
- flutter 攔截 url
- flutter 設(shè)置 JavaScriptChannel
- flutter 向頁面注入 js
向頁面注入 js 需要等頁面加載完成后再注入。注入 js 的能力非常強(qiáng)大的。幾乎可以對(duì)頁面做任意修改。比如
- 刪除頁面中不想要的部分
- 修改頁面的樣式
- 增加頁面的功能，比如給頁面增加一個(gè)按鈕，點(diǎn)按鈕跳到原生頁面，就好像原來的頁面就有這個(gè)功能一樣。
刪除頁面中不想要的部分，這是有實(shí)際意義的。頁面都會(huì)有頁頭，這可能和 app 的頭部沖突。有了注入 js 這個(gè)利器，可以在不修改頁面的情況下，直接在 app 中不顯示頁頭。
修改頁面樣式，這個(gè)你懂的，既然能注入 js ，也就是能注入 css 了。相比于直接用 js 修改頁面樣式，注入 css 的方式更加容易維護(hù)。
當(dāng)然了，凡事有利有弊，不要濫用這個(gè)功能。在 app 單方面修改頁面，將來頁面修改的時(shí)候可能會(huì)翻車，即使做好溝通，也會(huì)給頁面開發(fā)造成限制或麻煩，所以如何做一定要權(quán)衡各方面的得失。
app 不像頁面那樣可以隨時(shí)修改，所以要優(yōu)先考慮讓頁面實(shí)現(xiàn)功能，盡量把控制權(quán)交給頁面（說兩遍了，因?yàn)楹苤匾?。js 注入這種操作不是萬不得已不要做，把它做為最后的選項(xiàng)。
最后說一點(diǎn)，示例中為了方便演示用 loadHtmlString，實(shí)際應(yīng)用中一般是用 loadRequest 加載網(wǎng)址。
loadHtmlString(htmlString) loadRequest(Uri.parse('https://juejin.cn'))
以上就是js 交互在Flutter 中使用 webview_flutter的詳細(xì)內(nèi)容，更多關(guān)于js 交互webview_flutter的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序 高德地圖SDK詳解及簡(jiǎn)單實(shí)例（源碼下載）
這篇文章主要介紹了微信小程序 高德地圖詳解及簡(jiǎn)單實(shí)例（源碼下載）的相關(guān)資料,需要的朋友可以參考下2017-01-01
純js實(shí)現(xiàn)高度可擴(kuò)展關(guān)鍵詞高亮方案詳解
這篇文章主要為大家介紹了純js實(shí)現(xiàn)高度可擴(kuò)展關(guān)鍵詞高亮方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JS前端中的設(shè)計(jì)模式和使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了JS前端中的設(shè)計(jì)模式和使用場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS前端畫布與組件元信息數(shù)據(jù)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
reduce探索lodash.reduce實(shí)現(xiàn)原理解析
這篇文章主要為大家介紹了reduce探索lodash.reduce實(shí)現(xiàn)原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序 搖一搖抽獎(jiǎng)簡(jiǎn)單實(shí)例實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 搖一搖抽獎(jiǎng)簡(jiǎn)單實(shí)例實(shí)現(xiàn)代碼的相關(guān)資料,這里實(shí)現(xiàn)搖一搖抽獎(jiǎng)的功能，需要的朋友可以參考下2017-01-01
js封裝一個(gè)websocket實(shí)現(xiàn)及使用詳解
這篇文章主要為大家介紹了js封裝一個(gè)websocket實(shí)現(xiàn)示例及使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
微信小程序（二十二）action-sheet組件詳細(xì)介紹
這篇文章主要介紹了微信小程序action-sheet組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
理解js中原型、原型鏈這個(gè)概念，絕對(duì)是幫助我們更深入學(xué)習(xí)js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關(guān)鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡(jiǎn)潔的文字，清楚明白講解原型鏈相等關(guān)系和原型、原型鏈存在的意義2021-09-09
這篇文章主要為大家介紹了npm腳本庫組織在項(xiàng)目中的地位詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07