如何通过HtmlElementView实现JavaScript向Flutter传递数据？

在Flutter Web中使用HtmlElementView加载本地HTML/JS时，主要有两种可靠的方式实现JS到Flutter的数据传递：

方法一：使用postMessage跨上下文通信 #

因为IFrame和Flutter运行在不同的上下文，postMessage是标准的跨窗口通信方案，适合这种场景：

步骤1：在Flutter中监听消息事件 #

修改你的registerViewFactory代码，为IFrame添加消息监听：

import 'dart:html' as html;
import 'dart:ui' as ui;

class WebClass implements CommonAbstractClass {
  @override
  Widget build(BuildContext context) {
    // 监听来自IFrame的消息
    html.window.addEventListener('message', (html.Event event) {
      final html.MessageEvent msgEvent = event as html.MessageEvent;
      // 处理JS传来的数据，比如打印或更新Flutter状态
      print('从JS收到的数据：${msgEvent.data}');
    });

    ui.platformViewRegistry.registerViewFactory(
        'hello-html',
        (int viewId) => html.IFrameElement()
          ..width = '640'
          ..height = '360'
          ..src = 'myHtmlFile.html'
          ..style.border = 'none'
          // 允许IFrame发送消息到父窗口（Flutter）
          ..allow = 'same-origin');
        
    return Scaffold(
      appBar: AppBar(title: const Text('Web App')),
      body: SizedBox(
          height: 500,
          child: HtmlElementView(
            viewType: 'hello-html',
          )),
    );
  }
}

步骤2：在JavaScript中发送消息 #

在你的myHtmlFile.html对应的JS代码里，调用window.parent.postMessage发送数据：

// 假设JS生成了结果数据
const jsResult = { status: 'success', data: '这是JS返回的内容' };

// 发送消息到Flutter（父窗口），指定当前域名确保安全
window.parent.postMessage(jsResult, window.location.origin);

方法二：直接使用Dart JS互操作（dart:js） #

因为你的HTML和Flutter同域（都在web目录下），可以直接通过dart:js让JS调用Flutter的全局函数，这种方式更直接：

步骤1：在Flutter中定义全局可调用的函数 #

import 'dart:js' as js;
import 'dart:html' as html;
import 'dart:ui' as ui;

class WebClass implements CommonAbstractClass {
  @override
  Widget build(BuildContext context) {
    // 注册一个全局JS可调用的函数
    js.context['receiveDataFromJS'] = (dynamic data) {
      print('JS直接传递的数据：$data');
      // 可在此处更新Flutter状态，比如调用setState
    };

    ui.platformViewRegistry.registerViewFactory(
        'hello-html',
        (int viewId) => html.IFrameElement()
          ..width = '640'
          ..height = '360'
          ..src = 'myHtmlFile.html'
          ..style.border = 'none');
        
    return Scaffold(
      appBar: AppBar(title: const Text('Web App')),
      body: SizedBox(
          height: 500,
          child: HtmlElementView(
            viewType: 'hello-html',
          )),
    );
  }
}

步骤2：在JavaScript中直接调用Flutter的全局函数 #

// JS生成结果后，直接调用Flutter注册的全局函数
const jsResult = 'JS直接传递的文本数据';
window.parent.receiveDataFromJS(jsResult);

注意事项 #

• 使用postMessage时，务必指定目标源（第二个参数），避免跨域安全风险；
• 传递复杂对象时，确保数据是可序列化的格式（如JSON）；
• 使用JS互操作时，注意Dart与JS的类型兼容问题，必要时做类型转换。

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