如何在webview中显示本地html文件夹 [英] how to show local html folder in webview

问题描述

我想在Web视图中显示一个html文件夹，其中包括CSS和javascript.像这个文件夹一样:

此文件夹应位于内存的sdcard路径上，而不是在应用程序资产文件夹中.我尝试了各种插件，例如 webview_flutter ， flutter_webview_plugin 并没有到达结果.使用以下方法，我只能读取index.html，并且文件夹内未显示其他任何相关文件.请帮我解决这个问题.

  import'dart:io';导入'package:flutter/material.dart';导入'package:flutter_webview_plugin/flutter_webview_plugin.dart';void main(){runApp(new MyApp());}MyApp类扩展了StatefulWidget {@override状态< StatefulWidget>createState(){返回_MyAppState();}}类别_MyAppState扩展了State< MyApp>{字符串filePath ='/sdcard/Download/button/index.html';最后的flutterWebViewPlugin = FlutterWebviewPlugin();@override窗口小部件build(BuildContext context){返回新的MaterialApp(路线:{"/":(_)=>Webview脚手架(网址:新的Uri.dataFromString(readFileAsync(filePath)，mimeType:'text/html').toString()，appBar:AppBar(标题:Text("webview")，)，withJavascript:正确，supportMultipleWindows:是的，withLocalUrl:是，allowFileURLs:true，withLocalStorage:是的，)}，);}字符串readFileAsync(字符串路径){字符串内容=新File('$ path').readAsStringSync();打印(内容);返回内容；}}  

解决方案

在Scaffold中使用Webview_Flutter插件使用此代码:

  WebView(initialUrl:''，javascriptMode:JavascriptMode.unrestricted，onWebViewCreated:(WebViewController webViewController){_webViewController = webViewController;_loadHtmlFromAssets();}，)，//加载资产文件的功能//例如以下代码中的filePath((字符串filePath ='/assests/files/abc1.html';)_loadHtmlFromAssets()异步{字符串fileHtmlContents =等待rootBundle.loadString(filePath);_webViewController.loadUrl(Uri.dataFromString(fileHtmlContents，mimeType:"text/html"，编码:Encoding.getByName('utf-8')).toString());} 

I want to display a html folder in the webview, which includes CSS and javascript. Like this folder : javascript_button

And this folder should be on the sdcard path of memory rather than in the application assets folder. I tried various plugins like webview_flutter, flutter_inappbrowser and flutter_webview_plugin and did not get to the result. With the following method, I was able to read the index.html only and no other related files were displayed inside the folder. Please help me to solve this problem.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  String filePath = '/sdcard/Download/button/index.html';
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        "/": (_) => WebviewScaffold(
          url:new Uri.dataFromString(readFileAsync(filePath), mimeType:
               'text/html').toString(),
          appBar: AppBar(
            title: Text("webview"),
          ),
          withJavascript: true,
          supportMultipleWindows: true,
          withLocalUrl: true,
          allowFileURLs: true,
          withLocalStorage: true,
        )
      },
    );
  }
  
  String readFileAsync(String path) {
    String contents = new File('$path').readAsStringSync();
    print(contents);
    return contents;
  }
}

解决方案

Use This Code using Webview_Flutter plugin in Scaffold:

  WebView(
            initialUrl: '',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _webViewController = webViewController;
              _loadHtmlFromAssets();
            },
          ),

// function to load Assets files
//filePath in bellow code for ex.(String filePath = '/assests/files/abc1.html';)


_loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString(filePath);
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
        mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

这篇关于如何在webview中显示本地html文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！