Flutter Flatter Web收听通过iFrame发布的事件_Flutter_Iframe_Local Storage_Flutter Web_Postmessage

Flutter Flatter Web收听通过iFrame发布的事件

flutter iframe

Flutter Flatter Web收听通过iFrame发布的事件,flutter,iframe,local-storage,flutter-web,postmessage,Flutter,Iframe,Local Storage,Flutter Web,Postmessage,我的目标是在主页上的iframe帮助下集成一个flatter小部件。主页不是用flatter编写的。但是，我需要一个界面，主页可以通过该界面与小部件进行通信。因此，我想到在主页上使用postMessage（），在flatter小部件中使用html.window.addEventListener（）。现在我收到了一个事件，但无法看到它的内容。我的临时解决方案是将消息保存在本地存储中，并且只将侦听器用作通知程序，但我并不喜欢这种方法。有谁能更好地解决我的问题吗颤振测试小部件： // ignore

我的目标是在主页上的iframe帮助下集成一个flatter小部件。主页不是用flatter编写的。但是，我需要一个界面，主页可以通过该界面与小部件进行通信。因此，我想到在主页上使用postMessage（），在flatter小部件中使用html.window.addEventListener（）。现在我收到了一个事件，但无法看到它的内容。我的临时解决方案是将消息保存在本地存储中，并且只将侦听器用作通知程序，但我并不喜欢这种方法。有谁能更好地解决我的问题吗

颤振测试小部件：

// 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>

//忽略：避免web库在flatter中
将“dart:html”导入为html；
导入“package:simple_cookies/simple_cookies.dart”；
类MessageListener扩展了StatefulWidget{
@凌驾
_MessageListenerState createState（）=>\u MessageListenerState（）；
}
类_MessageListenerState扩展状态{
最后一串；
@凌驾
void initState（）{
html.window.addEventListener（'message'，listen，true）；
super.initState（）；
}
@凌驾
无效处置（）{
removeEventListener（'message'，listen，true）；
super.dispose（）；
}
void侦听（html.Event）{
last=Cookies.get（'iframe_message'）？？“Error”；
setState（（）{}）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“iFrame测试”），
),
正文：中(
子项：SingleChildScrollView（子项：文本（最后一个？？“还没有消息”），
),
);
}
}

主页：

// 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>


网站标题
函数pageProcessing（）{
让messageButton=window.document.getElementById（“post_消息”）；
messageButton.addEventListener（“单击”，（）=>{
让message=window.document.getElementById（“message_text”）.value；
setItem（“iframe_message”，message）；
document.getElementById（'flatter_widget'）.contentWindow.postMessage(
{
发件人：“主页”，
信息：信息
},
"*"
);
});
}
window.document.addEventListener（'readystatechange'，（）=>{
如果（window.document.readyState=='complete'）{
页面处理（）；
}
}
);

要从侦听器读取消息数据，您必须将事件强制转换为

MessageEvent

：

void侦听（html.Event）{
var data=（事件为html.MessageEvent）.data；
打印（数据['sender']）；
打印（数据['message']）；
设置状态（）{
//...
});
}