[英]Flutter Web listen to Events posted through iFrame
my goal is to integrate a flutter widget with the help of an iframe on my main page.我的目标是在我的主页上借助iframe集成一个 flutter 小部件。 The main page is not written in flutter.
主页没有写flutter。 However, I need an interface through which the main page can communicate with the widget .
但是,我需要一个界面,通过该界面,主页面可以与小部件进行通信。 So I thought of using postMessage() on the main page and html.window.addEventListener() in the flutter widget.
所以我想在主页上使用postMessage()并在 flutter 小部件中使用html.window.addEventListener() 。 Now I am receiving an event inside flutter, but cannot see its content.
现在我在 flutter 内收到一个事件,但看不到它的内容。 My temporarily solution is to save the message in local storage and only use the listener as a notifier, but i don't really like this approach.
我的临时解决方案是将消息保存在本地存储中,并且仅将侦听器用作通知器,但我不太喜欢这种方法。 Has anyone a better solution for my problem?
有没有人更好地解决我的问题?
Flutter Test Widget: 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')),
),
);
}
}
main page:主页:
<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>
To read message data from listener you have to cast event to MessageEvent
:要从侦听器读取消息数据,您必须将事件转换为
MessageEvent
:
void listen(html.Event event) {
var data = (event as html.MessageEvent).data;
print(data['sender']);
print(data['message']);
setState(() {
//...
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.