Flutter Web中从HtmlElementView获取数据的策略与实践

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html' as html;
import 'dart:convert'; // 用于解析JSON数据

class AddressSearchPage extends StatefulWidget {
  const AddressSearchPage({Key? key}) : super(key: key);

  @override
  State<AddressSearchPage> createState() => _AddressSearchPageState();
}

class _AddressSearchPageState extends State<AddressSearchPage> {
  // 存储从iframe接收到的地址数据
  String? _receivedAddress;
  // 用于存储message事件的监听器，以便在dispose时移除
  late html.EventListener _messageEventListener;

  @override
  void initState() {
    super.initState();

    // 注册IFrameElement
    // 注意：'address_iframe_view'是自定义的viewType，确保唯一性
    ui.platformViewRegistry.registerViewFactory(
      'address_iframe_view',
      (int viewId) {
        final iframe = html.IFrameElement()
          ..src = 'https://daum_postcode_mobile' // 替换为实际的地址搜索URL
          ..style.width = '100%'
          ..style.height = '100%'
          ..style.border = 'none';

        // 可选：监听iframe的load事件，确保内容加载完毕
        iframe.onLoad.listen((event) {
          print('IFrame loaded: ${iframe.src}');
          // 如果iframe是同源的，可以在这里尝试注入JS。
          // 但对于跨源，postMessage是首选。
        });

        return iframe;
      },
    );

    // 监听html.window的message事件，接收来自iframe的数据
    _messageEventListener = (html.Event event) {
      if (event is html.MessageEvent) {
        // 建议检查event.origin以增强安全性，确保消息来自预期的源
        // 例如：if (event.origin == 'https://daum_postcode_mobile_domain') { ... }
        print('Received message from iframe: ${event.data}');

        try {
          // 假设iframe发送的是JSON字符串
          final dynamic receivedData = json.decode(event.data);
          // 根据实际数据结构提取地址信息
          if (receivedData is Map && receivedData.containsKey('address')) {
            setState(() {
              _receivedAddress = receivedData['address'];
            });
            // 收到数据后可以导航回前一个页面
            Navigator.pop(context, _receivedAddress);
          } else {
            print('Received data is not in expected format: ${event.data}');
          }
        } catch (e) {
          print('Error parsing message from iframe: $e, data: ${event.data}');
        }
      }
    };

    html.window.addEventListener('message', _messageEventListener);
  }

  @override
  void dispose() {
    // 移除事件监听器，防止内存泄漏
    html.window.removeEventListener('message', _messageEventListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('地址搜索'),
        backgroundColor: Colors.white,
        iconTheme: const IconThemeData(color: Colors.black),
        elevation: 0.0,
      ),
      body: Column(
        children: [
          Expanded(
            child: HtmlElementView(
              viewType: 'address_iframe_view', // 使用注册时定义的viewType
            ),
          ),
          if (_receivedAddress != null)
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                '已选择地址: $_receivedAddress',
                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),
        ],
      ),
    );
  }
}

// 这段代码假设存在于iframe内部，当地址选择完成时被调用
function sendAddressToParent(addressData) {
  // addressData 应该是一个包含地址信息的JavaScript对象
  const message = JSON.stringify({ address: addressData }); // 将数据转换为JSON字符串

  // window.parent 指向父窗口（Flutter Web应用）
  // '*' 作为targetOrigin表示允许任何源接收消息，但在生产环境中应指定父窗口的精确源，例如 'https://your-flutter-app-domain.com'
  window.parent.postMessage(message, '*');
}

// 假设Daum Postcode或其他地址服务提供了一个回调函数
// 当用户选择地址后，这个回调会被触发，并传入地址数据
// 你需要根据实际的第三方服务API来调用sendAddressToParent
// 例如：
// DaumPostcode.onComplete(function(data) {
//   sendAddressToParent(data.address); // 假设data.address包含地址字符串
// });