Flutter中通过IFrameElement获取HTML答题页分数变量求助

要获取IFrame内JS计算的分数，核心是利用HTML5的postMessage API实现跨上下文通信，以下是具体步骤：

1. 修改HTML答题页面的JS代码 #

当答题完成并计算出分数后，通过window.parent.postMessage将分数发送给Flutter端：

// 假设分数计算完成后得到变量score
const score = 85; // 示例分数
// 发送消息到父页面（Flutter Web），targetOrigin指定为你的Flutter应用域名，生产环境建议指定具体域名，*表示允许所有
window.parent.postMessage({ type: 'quizScore', score: score }, '*');

2. 修改Flutter端代码，添加消息监听 #

在现有IFrame初始化代码中，添加对message事件的监听，接收来自IFrame的分数：

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

class QuizIframePage extends StatefulWidget {
  final String _url;
  QuizIframePage(this._url);

  @override
  State<QuizIframePage> createState() => _QuizIframePageState();
}

class _QuizIframePageState extends State<QuizIframePage> {
  late html.IFrameElement _iframeElement;
  late Widget _iframeWidget;

  @override
  void initState() {
    super.initState();
    _initIframe();
    _setupMessageListener();
  }

  void _initIframe() {
    _iframeElement = html.IFrameElement();
    _iframeElement.src = widget._url;
    _iframeElement.style.border = 'none';
    ui.platformViewRegistry.registerViewFactory(
      'iframeElement',
      (int viewId) => _iframeElement,
    );
    _iframeWidget = HtmlElementView(
      key: UniqueKey(),
      viewType: 'iframeElement',
    );
  }

  void _setupMessageListener() {
    // 监听来自IFrame的message事件
    html.window.addEventListener('message', (html.Event event) {
      if (event is html.MessageEvent) {
        final data = event.data;
        // 验证消息类型，确保是答题分数
        if (data is Map && data['type'] == 'quizScore') {
          final score = data['score'];
          // 在这里处理获取到的分数，比如更新状态、弹窗展示等
          print('获取到答题分数：$score');
          setState(() {
            // 可将score保存到组件状态中供后续使用
          });
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _iframeWidget,
    );
  }

  @override
  void dispose() {
    // 移除监听，避免内存泄漏
    html.window.removeEventListener('message', null);
    super.dispose();
  }
}

3. 关键注意事项 #

• 跨域安全：如果IFrame加载的页面与Flutter Web应用不同源，生产环境中不要用*作为postMessage的targetOrigin，请指定具体的Flutter应用域名；同时在Flutter端接收消息时，建议验证event.origin是否为预期域名，拒绝恶意来源的消息：

  if (event.origin != 'https://your-quiz-page-domain.com') {
    return; // 拒绝非预期来源的消息
  }
  

• 内存管理：组件销毁时务必移除事件监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Yigitcan Nalbantoğlu