如何让 Flutter 的 webview 处理从本地 html 加载的本地资产？答案

【问题标题】：How to get Flutter's webview to work with local assets loaded from local html?如何让 Flutter 的 webview 处理从本地 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>

【问题讨论】：

标签： flutter flutter-dependencies flutterwebviewplugin

【解决方案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());

}

【讨论】：