如何使用与 Flutter 中的 html 关联的 js 文件。我使用 webview_flutter 插件加载 index.html 文件并且可以工作，但我无法加载 js 文件 这是我的颤振代码：
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: WebView(
initialUrl: '',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_webViewController = webViewController;
_loadHtmlFromAssets();
},
),
_loadHtmlFromAssets() async {
String fileHtmlContents = await rootBundle.loadString('files/index.html');
_webViewController.loadUrl(Uri.dataFromString(fileHtmlContents, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
}
这是我的 html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" **src="files/plotter.js**"></script>
<title>Test plotter</title>
</head>
<body>
<!-- <script type="text/javascript" src="plotter.js"></script> -->
<div id='test'></div>
<script type="text/javascript">
这是出现在 conosle 中的消息
I/chromium(31201): [INFO:CONSOLE(86)] "Uncaught ReferenceError: Plotter is not defined", source: data:text/html;charset=utf-8,%
无需读取资产，然后从数据 uri 加载，只需像这样传递资产路径：
_loadHtmlFromAssets() async {
_webViewController.loadUrl('file:///android_asset/flutter_assets/files/index.html');
}
在 index.html 文件中，脚本路径应该是相对的。对我来说，索引.html和索引.js在同一路径上，所以这有效：
<script src="index.js"></script>
我的pubspec.yml看起来像这样：
assets:
- files/index.html
- files/index.js
编辑
使用local_assets_server独立于平台的解决方案：
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:local_assets_server/local_assets_server.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) => MaterialApp(home: MyWidget());
}
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
String address;
int port;
bool isListening = false;
@override
initState() {
_initServer();
super.initState();
}
_initServer() async {
final server = new LocalAssetsServer(
address: InternetAddress.loopbackIPv4,
assetsBasePath: 'files',
);
final address = await server.serve();
setState(() {
this.address = address.address;
port = server.boundPort;
isListening = true;
});
}
List<String> propList = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My WebView'),
),
body: !isListening ? Center(child: CircularProgressIndicator()) : WebView(
initialUrl: 'http://$address:$port',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
}),
);
}
}
对于安卓，在清单文件中添加usesCleartextTraffic="true"：
<application
....
android:usesCleartextTraffic="true"