如何在Flutter Web中运行本地HTML、CSS和JS代码？

方案1：直接使用HTML Iframe（最简便） #

Flutter Web本质是网页，直接用HtmlElementView嵌入原生iframe是最直接的方式，完全支持JS和CSS执行。

操作步骤： #

• 将本地HTML、JS、CSS文件放入Flutter项目的web目录下（可新建子文件夹如web/local_content统一存放）。
• 编写嵌入iframe的Flutter Widget：

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class LocalHtmlViewer extends StatelessWidget {
  const LocalHtmlViewer({super.key});

  @override
  Widget build(BuildContext context) {
    // 注册iframe平台视图
    ui.platformViewRegistry.registerViewFactory(
      'local-html-container',
      (int viewId) => html.IFrameElement()
        ..src = 'local_content/index.html' // 指向web目录下的HTML入口文件
        ..style.width = '100%'
        ..style.height = '100%'
        ..style.border = 'none'
        ..allow = 'fullscreen',
    );

    return const HtmlElementView(viewType: 'local-html-container');
  }
}

• 在页面中直接使用该Widget即可，HTML内部正常通过<script>和<link>标签引入JS、CSS文件即可生效。

方案2：配置webview_web启用JS支持 #

如果偏好使用webview类插件，webview_web本身支持JS，只需开启对应配置：

操作步骤： #

1. 添加依赖到pubspec.yaml：

dependencies:
  webview_flutter: ^4.4.0
  webview_flutter_web: ^0.2.2+1

2. 初始化WebView并启用JS：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void main() {
  WebView.platform = WebWebViewPlatform(); // 启用web端适配
  runApp(const MyApp());
}

class LocalWebView extends StatefulWidget {
  const LocalWebView({super.key});

  @override
  State<LocalWebView> createState() => _LocalWebViewState();
}

class _LocalWebViewState extends State<LocalWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // 必须开启JS权限
      ..loadRequest(Uri.parse('local_content/index.html')); // 加载web目录下的本地文件
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: controller);
  }
}

关键注意点 #

• 本地资源必须放在web目录下：Flutter Web编译后仅能访问该目录下的静态资源，其他目录文件无法被网页读取。
• JS与Flutter通信：若需要JS和Flutter侧交互，可通过postMessage实现（方案1的iframe可通过html.window.addEventListener接收消息，Flutter侧用html.window.postMessage发送）。

内容的提问来源于stack exchange，提问作者Nikita