如何从资产中加载完整的网站？
如何从资产中加载完整的网站？
提问于 2019-02-10 22:44:30
是否有可能从本地资源加载完整的网站(包括相关文件)？我用flutter插件webview_flutter和加载的index.html试了一下。
Future<String> loadLocal() async {
return await rootBundle.loadString('assets/mywebsite/index.html');
}仅呈现html代码，关联的javascripts不起作用。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-02-10 22:48:07
你可以关注https://github.com/flutter/flutter/issues/27086
同时，您可以在Dart中实现web服务器，该服务器提供来自资产的文件，并将web视图指向该集成web服务器。
https://medium.com/@segaud.kevin/facebook-oauth-login-flow-with-flutter-9adb717c9f2e是关于如何在Dart中做到这一点。
Stack Overflow用户
发布于 2019-12-01 20:47:32
您还可以尝试my plugin flutter_inappwebview，这是一个Flutter插件，允许您添加内联WebViews或打开应用内浏览器窗口，它有许多事件、方法和选项来控制WebViews。
要从assets加载完整的网站，您需要在pubspec.yaml文件中声明相应的文件：
...
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/index.html
- assets/page-1.html
- assets/page-2.html
- assets/js/
- assets/css/
- assets/images/
...然后，您可以使用index.html小部件的initialFile参数加载您的InAppWebView文件：
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: InAppWebViewPage()
);
}
}
class InAppWebViewPage extends StatefulWidget {
@override
_InAppWebViewPageState createState() => new _InAppWebViewPageState();
}
class _InAppWebViewPageState extends State<InAppWebViewPage> {
InAppWebViewController webView;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InAppWebView")
),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: Container(
child: InAppWebView(
initialFile: "assets/index.html",
initialHeaders: {},
initialOptions: InAppWebViewWidgetOptions(
inAppWebViewOptions: InAppWebViewOptions(
debuggingEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
},
onLoadStop: (InAppWebViewController controller, String url) {
},
onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
print(consoleMessage.message);
},
),
),
),
]))
);
}
}在你的index.html中，你会有类似这样的东西：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- this is a css file inside the assets folder -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- this is a javascript file inside the assets folder -->
<script src="js/main.js"></script>
</body>
</html>Stack Overflow用户
发布于 2020-10-27 18:53:06
我已经能够做到这一点，但它只能在Android上工作。我通过以下方式使用了InAppWebView库：
child: Container(
child: InAppWebView(
initialFile: "images/test.html",
initialHeaders: {},
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {},
onLoadStop: (InAppWebViewController controller, String url) {},
onConsoleMessage: (InAppWebViewController controller,
ConsoleMessage consoleMessage) {
print(consoleMessage.message);
},
),
),html文件(包括相关文件)已添加到项目资源中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54617509
复制相关文章
相似问题
腾讯云开发者
