如何让 Flutter 的 webview 处理从本地 html 加载的本地资产?
Posted
技术标签:
【中文标题】如何让 Flutter 的 webview 处理从本地 html 加载的本地资产?【英文标题】:How to get Flutter's webview to work with local assets loaded from local html? 【发布时间】:2020-06-13 21:26:58 【问题描述】:我有一个加载 css 文件、字体和图像文件的 html 文件。目前我的 webview 加载时没有加载任何这些辅助文件,没有显示图像,没有显示 css。我正在尝试这样:
loadHtmlFromAssets();
return WebviewScaffold(
appBar: AppBar(
title: Text("Web", style: TextStyle(color: Colors.black),),
backgroundColor: Colors.white,
iconTheme: IconThemeData(
color: Colors.black
),
),
url: 'about:blank',
withZoom: false,
withjavascript: true,
allowFileURLs: true,
withLocalUrl: true,
localUrlScope: 'assets/maphtml/',
withLocalStorage: true,
);
loadHtmlFromAssets() async
String fileText = await rootBundle.loadString('assets/maphtml/zemelapis.html');
flutterWebViewPlugin.reloadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName("utf-8")).toString());
html 中的资产具有 zemelapis.html 位置的假定前缀,例如
<script src="js/image-map-pro.min.js"></script>
【问题讨论】:
【参考方案1】:您可以在生成Uri之前将js内容添加到html正文中
static void loadHtmlFromAssets(String fileText) async
String htmlText = await rootBundle.loadString('assets/maphtml/zemelapis.html');
final String jsText = await rootBundle.loadString('assets/maphtml/js/image-map-pro.min.js'); //set exact js file path
//add js to html body
htmlText = '$htmlText<script>$jsText</script>';
flutterWebViewPlugin.reloadUrl(Uri.dataFromString(htmlText, mimeType: 'text/html', encoding: Encoding.getByName("utf-8")).toString());
【讨论】:
以上是关于如何让 Flutter 的 webview 处理从本地 html 加载的本地资产?的主要内容,如果未能解决你的问题,请参考以下文章
在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理
如何让 Pinch Zoom 在 webview_flutter 插件上工作
Flutter - 在 WKWebView 中阻止 Webview Cookie