时间戳

首页 > 解决方案 > 使用 webview_flutter 插件时如何使用本地 js 或 css 文件

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

问题描述

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

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

这在 Native Android & Native iOS App 中运行良好。

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

webview_flutter 不支持 js & css include 吗？

标签： flutterwebviewflutter-plugin

解决方案

是什么让您认为它不受支持？它就像在任何浏览器中一样工作：您可以提供 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()

推荐阅读