Flutter Web 监听通过 iFrame 发布的事件
Posted
技术标签:
【中文标题】Flutter Web 监听通过 iFrame 发布的事件【英文标题】：Flutter Web listen to Events posted through iFrame 【发布时间】：2021-05-09 17:43:34 【问题描述】：我的目标是在我的主页上借助 iframe 来集成 Flutter 小部件。主页不是用flutter写的。但是，我需要一个界面，通过该界面主页可以与小部件进行通信。所以我想到了在主页面使用postMessage()，在flutter小部件中使用html.window.addEventListener()。现在我在颤动中收到一个事件，但看不到它的内容。我的临时解决方案是将消息保存在本地存储中，并且仅将侦听器用作通知器，但我不太喜欢这种方法。有没有人能更好地解决我的问题？
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"> <input type="button" id="post_message" value="Send Message">
</div>
<iframe id="flutter_widget" src="http://testing.orcaf#####"></iframe>
</body>
</html>
【问题讨论】：
【参考方案1】：要从侦听器读取消息数据，您必须将事件转换为 MessageEvent：
void listen(html.Event event)
var data = (event as html.MessageEvent).data;
print(data['sender']);
print(data['message']);
setState(()
//...
);
【讨论】：
以上是关于Flutter Web 监听通过 iFrame 发布的事件的主要内容，如果未能解决你的问题，请参考以下文章
Flutter（Web）如何监听javascript事件或将javascript数据传递给flutter？
Flutter Web Iframe html元素错误重新加载
如何在flutter web中动态更改iframe的src？