如何用flutter_webview_plugin 0.1.5启用JavaScript并处理网页JS？

我来帮你搞定这个问题！要实现和你Android原生代码相同的功能（启用JavaScript并处理网页的JS调用），可以按照以下步骤操作：

1. 添加依赖 #

首先确保你的pubspec.yaml里已经添加了flutter_webview_plugin的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.1.5

执行flutter pub get完成依赖安装。

2. 核心功能实现 #

对应你原生代码里的启用JS、加载URL以及处理JS交互，Flutter端可以通过以下方式完成：

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class WebViewDemoPage extends StatefulWidget {
  @override
  _WebViewDemoPageState createState() => _WebViewDemoPageState();
}

class _WebViewDemoPageState extends State<WebViewDemoPage> {
  // 初始化WebView插件实例
  final FlutterWebviewPlugin _webViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    super.initState();
    // 监听网页中JavaScript发送的消息
    _webViewPlugin.onMessage.listen((message) {
      print('收到JS消息：${message.data}');
      // 根据消息内容执行对应的Flutter逻辑
      if (message.data == "call_flutter_function") {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('JS触发了Flutter的操作！')),
        );
      }
    });
  }

  @override
  void dispose() {
    // 销毁插件实例，避免内存泄漏
    _webViewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      // 加载你指定的网页地址，对应原生的loadUrl
      url: 'http://192.168.0.5/table.php',
      // 启用JavaScript，对应原生的setJavaScriptEnabled(true)
      withJavascript: true,
      // 可选：启用本地存储，根据业务需求添加
      withLocalStorage: true,
      // 配置页面顶部的AppBar
      appBar: AppBar(title: const Text('WebView示例')),
    );
  }
}

网页端JavaScript代码（向Flutter发送消息） #

在你的table.php网页中，通过以下代码向Flutter传递消息：

// 发送普通文本消息
window.postMessage("Hello from web page!");

// 发送触发特定操作的指令
window.postMessage("call_flutter_function");

额外：Flutter主动调用网页JS #

如果你需要从Flutter端主动执行网页中的JavaScript代码，可以使用evalJavascript方法：

// 示例：在Flutter中调用网页的alert弹窗
_webViewPlugin.evalJavascript('alert("Hello from Flutter!")');

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