如何将 Flutter Web 应用程序嵌入网站并通过网站将数据发送到 Flutter Web 应用程序
Posted
技术标签:
【中文标题】如何将 Flutter Web 应用程序嵌入网站并通过网站将数据发送到 Flutter Web 应用程序【英文标题】：How to Embed flutter web app into website and send data through website to flutter web app 【发布时间】：2021-09-27 15:11:16 【问题描述】：我使用 Iframe 在我的网站中嵌入了 Flutter Web 应用程序。在网站上，我有一个简单的文本区域，在 Flutter Web 应用程序中，我还有一个文本小部件。我想要的功能是，当我在这个文本区域写东西时，它也应该立即显示在我的 Flutter Web 应用程序中。目前我通过将 url 参数传递给 iframe 的 src 属性来做到这一点。但它非常慢，因为它重新启动了我的颤振网络应用程序。 问题不在于将 Flutter Web 应用程序嵌入网站。 我的问题是如何通过浏览器更改flutter web app的数据.The functionality I want to achieve with speed
我不想像下面的代码那样通过传递 url 参数来做，因为它很慢。
<!DOCTYPE html>
<html>
<body>
<input id='input' type="text">
<input type="button" onclick="changeText()" value="Change" />
<h1>The web application that is embeding flutter app</h1>
<div id = 'main'>
<div>
<iframe src="http://localhost:54827/#/"
style="overflow:auto;border:5px ridge blue"> </iframe>
</div>
</div>
</body>
<script>
var changeText = ()=>
var textToDisplay = document.getElementById("input").value;
var frame = document.createElement('iframe');
frame.setAttribute('src', `http://localhost:55035/#/?answer=$textToDisplay`);
frame.setAttribute('height', '600')
var main = document.getElementById("main");
main.innerHTML ='';
document.getElementById("main").appendChild(frame);
</script>
</html>【问题讨论】：
试一试postMessage。此 API 允许您将“消息”事件从父页面发送到子页面（反之亦然！）。在 Flutter 应用程序中，您只需使用 dart:html 设置一个全局“消息”侦听器，然后根据需要处理事件。在您的 Web 应用程序中，您可以将消息直接发布到您的子 iframe 中。 （查看我链接的文章中的安全注意事项，以确保只有您可以将消息发布到您自己的 iframe。） 谢谢，它对我有用。在这里我得到了complete implementation 啊，是的，这看起来与我描述的完全一样，但带有实际代码。酷！ 我又遇到了一个问题。我有一个多屏颤动网络应用程序。但是我想在我的网站中嵌入一个特定的屏幕，并且不想让用户从该屏幕向前或向后移动。基本上我希望用户不能按下嵌入页面。我正在使用 iframe。您能否帮助我或提供一些线索来实现这一目标。 【参考方案1】：阿里巴巴的 OpenKraken 是您的最佳选择
官方：https://openkraken.com/ GitHub：https://github.com/openkraken/kraken 公告：https://developer.aliyun.com/article/783696【讨论】：
【参考方案2】：您可以像嵌入其他内容一样，在 HTML 文件的 iframe 标记中嵌入 Flutter Web 应用程序。在以下示例中，将“URL”替换为 HTML 页面的位置：
<iframe src="URL"></iframe>
【讨论】：
以上是关于如何将 Flutter Web 应用程序嵌入网站并通过网站将数据发送到 Flutter Web 应用程序的主要内容，如果未能解决你的问题，请参考以下文章
在 Flutter for Web 应用程序中嵌入网页作为 Widget（类似于 iframe）
如何将文本保存到 Flutter Web 应用程序的网站子目录，然后让应用程序稍后读取？