如何将 Flutter Web 应用程序嵌入网站并通过网站将数据发送到 Flutter Web 应用程序答案

【问题标题】：How to Embed flutter web app into website and send data through website to flutter web app如何将 Flutter Web 应用程序嵌入网站并通过网站将数据发送到 Flutter Web 应用程序
【发布时间】：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/#/" width="800px" height="600px" 
            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。您能否帮助我或提供一些线索来实现这一目标。

标签： javascript flutter dart iframe flutter-web

【解决方案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>

【讨论】：