如何将flutter Web应用嵌入到网站中并通过网站发送数据到flutter Web应用

juzqafwq  于 2023-01-27  发布在  Flutter
关注(0)|答案(1)|浏览(157)

我已经使用Iframe在我的网站中嵌入了flutter web应用程序。在网站上我有一个简单的文本区域,在flutter web应用程序中我也有一个文本小部件。我想要的功能是当我在这个文本区域中写东西时,它也应该立即显示在我的flutter web应用程序中。目前我是通过将url参数传递给iframe的src属性来实现的。但是它非常慢,因为它会重新启动我的flutter web应用程序。问题不在于将flutter Web应用程序嵌入到网站中。我的问题是我们如何通过浏览器更改flutter Web应用程序的数据. 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>
sg2wtvxw

sg2wtvxw1#

在今天的FlutterForward活动中宣布,稳定版的功能性午餐非常好。
我等着呢。
在此处跟踪问题。https://github.com/flutter/flutter/issues/118481

相关问题