Flutter（Web）如何监听javascript事件或将javascript数据传递给flutter？

Posted 2023-02-23

【中文标题】Flutter（Web）如何监听javascript事件或将javascript数据传递给flutter？

【英文标题】：Flutter (Web) how to listen to javascript event or pass javascript data to flutter?

【发布时间】：2020-09-26 19:03:17

【问题描述】：

我目前正在编写一个 Flutter Web 应用程序，并正在创建一个全屏按钮，该按钮使页面全屏并编辑页面，以便在单击时最大化容器。这个按钮通过跟踪一个名为“isfullscreen”的布尔值来工作，它在颤动中编辑 ui 并通过调用 dart:js 的 javascript 函数来最大化浏览器窗口。此按钮工作正常，并且允许用户在单击时退出全屏，并且所有内容都重置为默认值。但是，如果用户单击全屏按钮，然后手动离开全屏（f11 键，浏览器上的 esc 键），flutter 不会接收事件并且网页的内容被破坏（isfullscreen=true 但浏览器不是全屏)。是否可以a）在flutter中监听javascript事件，或者b）监听javascript事件，然后以某种方式将数据传递给flutter网页，以便当用户手动退出全屏而不单击按钮时布尔isfullscreen = false ? 感谢您的帮助。

【参考方案1】：

您可以在事件发生时在您的 js 代码中发布消息

window.parent.postMessage('any message', "*");

并在你的飞镖代码中听它

@override
void initState() 
  super.initState();

  //setup listener ---------------------------------
  window.addEventListener("message", (event) 
    MessageEvent event2 = event;
    print(event2.data);
  );
  //------------------------------------------------

【讨论】：

飞镖代码中的window 是什么？我应该使用什么进口？哦，我猜是 dart:html

@StackUnderflow 你说得对，它是import 'dart:html';