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

【问题标题】：How to use local js or css file while using webview_flutter plugin使用 webview_flutter 插件时如何使用本地 js 或 css 文件
【发布时间】：2019-11-23 11:55:40
【问题描述】：

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

我已经设法加载了本地 .html 文件，但是 .js 文件和 .css 包含在 html 代码的一部分中不起作用。

这在原生 Android 和原生 iOS 应用中运行良好。

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

不支持 webview_flutter js & css include 吗？

【问题讨论】：

标签： flutter webview flutter-plugin

【解决方案1】：

是什么让您认为它不受支持？它就像在任何浏览器中一样工作：您可以提供 JS/CSS 文件的相对或绝对路径。只是不要忘记设置javascriptMode: JavascriptMode.unrestricted 以允许执行javascript 代码。这是我使用 JS/CSS 文件创建 HTML 页面的示例：

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);
    });
  }

  child: uri != null ? WebView(
    initialUrl: uri.toString(),
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) => c = controller,
  ) : Container()

【讨论】：

感谢示例的快速更新，但是我仍然对如何将 js 库与 html 页面一起使用感到困惑。实际上，我想将 Jquery & Bootstrap css 与 html 一起使用。这可能吗？？
@DhavalPatel 没有理由不可能做到这一点。我向您展示了简单的示例。在您的情况下，您将拥有多个 js/css 文件（或一个缩小文件）。只需确保您在 HTML 中具有正确的文件路径即可。如果您不知道如何使用 jquery/bootstrap，您可能应该查看一些教程。正如我所说 - WebView 与普通浏览器几乎没有什么不同。