Ffltter Web收听通过iFrame发布的活动 [英] Flutter Web listen to Events posted through iFrame
本文介绍了Ffltter Web收听通过iFrame发布的活动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的目标是在主页上iFrame的帮助下集成颤动部件。首页并不是乱七八糟地写的。但是，我需要一个界面，通过它主页面可以与小部件进行通信。因此，我想在主页上使用postMessage()，在Ffltter小部件中使用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"> <input type="button" id="post_message" value="Send Message">
</div>
<iframe id="flutter_widget" src="http://testing.orcaf#####"></iframe>
</body>
</html>
推荐答案
若要从侦听器读取消息数据，您必须将事件强制转换为MessageEvent：
void listen(html.Event event) {
var data = (event as html.MessageEvent).data;
print(data['sender']);
print(data['message']);
setState(() {
//...
});
}
这篇关于Ffltter Web收听通过iFrame发布的活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
