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

2023-12-22

我使用 Iframe 在我的网站中嵌入了 flutter web 应用程序。在网站上,我有一个简单的文本区域,在 flutter web 应用程序中,我还有一个文本小部件。我想要的功能是,当我在此文本区域中写入内容时,它也应该立即显示在我的 flutter web 应用程序中。目前我正在通过将 url 参数传递给 iframe 的 src 属性来完成此操作。但它重新启动我的 flutter web 应用程序时速度非常慢。 问题不在于将 flutter web 应用程序嵌入到网站中。我的问题是我们如何通过浏览器更改flutter web应用程序的数据.我想要快速实现的功能 https://drive.google.com/file/d/1iUyH9NnAOalPzU3ut7MtJVa5O7lWSeji/view?usp=sharing

我不想像下面的代码那样通过传递 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>

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 flutter web 应用程序嵌入到网站中并通过网站将数据发送到 flutter web 应用程序 的相关文章

  • 有没有办法在javascript中代理(拦截)一个类的所有方法?

    我希望能够在类本身的构造函数内代理类的所有方法 class Boy constructor proxy logic do something before each call of all methods inside class like
  • 在 React 组件中等待异步函数并显示 Spinner

    初学者在这里 尝试从服务器获取一些数据并在获取后将其显示在我的反应组件中 但是 我在将异步函数集成到我的反应组件中时遇到了麻烦 import React useState from react import request from gra
  • 网络上的等角柱状图

    我计划为游戏的标记 图钉 构建在线地图 但我无法设置标记的正确纬度 原始地图是一个2048 2048px 的正方形 然后我得到了标记 数千个 地图坐标使用 0 到 100 之间的 x y 表示法设置 0 0 是top left角和100 1
  • 玉石压痕错误

    因此 对于我的 Express 网站 我使用 jade 所以我决定尝试修改我的布局文件 以便我可以开始设计我的网站 我修改了原始布局代码 有效 但我开始在任何扩展布局的文件中出现缩进错误 如下所示 500 Error home kevin
  • 使用 babel env 预设时,展开运算符出现语法错误

    我正在努力 现代化 meern io 入门样板 https github com Hashnode mern starter通过替换巴别塔es2015 and stage 0预设为env 然而 似乎env预设无法识别以下片段client m
  • ASP.NET 验证控件和 Javascript 确认框

    我有一个使用 NET 服务器端输入验证控件的页面 此页面还有一个 javascript 确认框 在提交表单时会触发该确认框 当前 当选择 提交 按钮时 会出现 javascript 确认框 一旦确认 就会触发 ASP NET 服务器端验证控
  • 在动态创建的元素的onclick函数的属性中传递一个字符串

    我试图在动态创建的锚元素的 onClick 事件处理函数的参数中传递一个字符串 请参阅小提琴http jsfiddle net shmdhussain bXYe4 http jsfiddle net shmdhussain bXYe4 我无
  • 是否有任何理由使用 axios 而不是 ES6 fetch [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 研究了 axios 和 ES6 fetch 的文档 我发现两者非常相似 并且都受到 ajax 及其简写的强烈影响 axios 的主要优点是浏览器
  • 如何使用 Nextjs/React 将 JSON 对象导出到 Excel?

    我有一个检索 json 对象的端点 如下所示 data id 1 temaIndicador Indian codigo 001 observaciones Interactions Specialist tertiary Regional
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 为某个时刻添加持续时间 (moment.js)

    时刻版本 2 0 0 阅读文档后 http momentjs com docs manipulating add 我认为这很简单 Chrome 控制台 var timestring1 2013 05 09T00 00 00Z var tim
  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • NodeJS - 将相对路径转换为绝对路径

    In my 文件系统我的工作目录在这里 C temp a b c d 在 b bb 下有文件 tmp txt C temp a b bb tmp txt 如果我想从工作目录转到该文件 我将使用以下路径 bb tmp txt 如果该文件不存在
  • 如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环?

    努力思考最好的解决办法 我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
  • iPhone 上的锁定方向 UIWebView

    有没有办法锁定 UIWebView 的方向 使用 Obj C JS 还是 Html 我不想有按钮或任何东西 我只想在应用程序打开时将其锁定为纵向 好像这个堆栈溢出帖子 https stackoverflow com questions 43
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • 测试 jQueryUI 是否已加载

    我正在尝试调试网站 并且我认为 jQueryUI 可能未正确加载 如何测试 jQueryUI 是否已加载 if jQuery ui UI loaded OR if typeof jQuery ui undefined UI loaded 应

随机推荐