Question

这个问题是针对webview_flutter插件的。（https://pub.dev/packages/webview_flutter）

我可以加载本地.html文件，但是.js文件和.css作为html代码的一部分无法正常工作。

这在本机Android和本机iOS应用程序中运行良好。

我认为这是支持html视图的基本功能之一。

不支持webview_flutter js和css include吗？

Answer 1

是什么让您认为它不受支持？它就像在任何浏览器中一样工作：您可以提供JS / CSS文件的相对或绝对路径。只是不要忘记将Node:v6.12.2 npm:3.10.10 OS:macOS Xcode:xcode 11.2 Build system设置为允许执行JavaScript代码。这是我用JS / CSS文件创建HTML页面的示例：

javascriptMode: JavascriptMode.unrestricted

import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

  Future<void> _showHtml() async {
    final tempDir = await getTemporaryDirectory();

    final htmlPath = join(tempDir.path, 'page.html');
    final cssPath = join(tempDir.path, 'css.css');
    final jsPath = join(tempDir.path, 'js.js');

    File(htmlPath).writeAsStringSync('<html><head><link rel = "stylesheet" type = "text/css" href = "$cssPath" /><script src="$jsPath"></script></head><body><div>Test</div></body></html>');
    File(cssPath).writeAsStringSync('div {background:green;}');
    File(jsPath).writeAsStringSync('document.addEventListener("DOMContentLoaded", function(){document.body.style.backgroundColor = "red"});');

    setState(() {
      uri = Uri(scheme: 'file', path: htmlPath);
    });
  }

使用webview_flutter插件时如何使用本地js或css文件

1 个答案: