Flutter Web 監聽通過 iFrame 發布的事件

Question

我的目標是在我的主頁上借助iframe集成一個 flutter 小部件。 主頁沒有寫flutter。 但是，我需要一個界面，通過該界面，主頁面可以與小部件進行通信。 所以我想在主頁上使用postMessage()並在 flutter 小部件中使用html.window.addEventListener() 。 現在我在 flutter 內收到一個事件，但看不到它的內容。 我的臨時解決方案是將消息保存在本地存儲中，並且僅將偵聽器用作通知器，但我不太喜歡這種方法。 有沒有人更好地解決我的問題？

Flutter 測試小部件：

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;
import 'package:simple_cookies/simple_cookies.dart';


 class MessageListener extends StatefulWidget {
      @override
      _MessageListenerState createState() => _MessageListenerState();
  }

class _MessageListenerState extends State<MessageListener> {
  String last;

  @override
  void initState() {
    html.window.addEventListener('message', listen, true);
    super.initState();
  }

  @override
  void dispose() {
    html.window.removeEventListener('message', listen, true);
    super.dispose();
  }

  void listen(html.Event event) {
    last = Cookies.get('iframe_message') ?? 'Error';
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('iFrame Test'),
      ),
      body: Center(
        child: SingleChildScrollView(child: Text(last ?? 'No messages yet')),
      ),
    );
  }
}

主頁：

<html>

<head>
    <title>website title</title>
    <script type="text/javascript">
        function pageProcessing() {
            let messageButton = window.document.getElementById("post_message");
            messageButton.addEventListener("click", () => {
                let message = window.document.getElementById("message_text").value;
                window.localStorage.setItem("iframe_message", message);
                document.getElementById('flutter_widget').contentWindow.postMessage(
                    {
                        sender: "main_page",
                        message: message
                    },
                    "*"
                );
            });
        }
        window.document.addEventListener('readystatechange', () => {
            if (window.document.readyState == 'complete') {
                pageProcessing();
            }
        }
        );
    </script>
</head>

<body>
    <div>
        <input type="text" id="message_text">&nbsp;<input type="button" id="post_message" value="Send Message">
    </div>
    <iframe id="flutter_widget" src="http://testing.orcaf#####"></iframe>
</body>

</html>

Answer 1

要從偵聽器讀取消息數據，您必須將事件轉換為MessageEvent ：

  void listen(html.Event event) {
    var data = (event as html.MessageEvent).data;
    print(data['sender']);
    print(data['message']);
    setState(() {
      //...
    });
  }

Flutter Web 監聽通過 iFrame 發布的事件

問題描述

1 個解決方案

解決方案1
2 已采納 2021-02-05 13:29:22

Flutter Web 監聽通過 iFrame 發布的事件

問題描述

1 個解決方案

解決方案1 2 已采納 2021-02-05 13:29:22

解決方案1
2 已采納 2021-02-05 13:29:22