加载 HTML 文件并在 Flutter Web 中显示

2024-06-19

我有一个 HTML 文件,其中包含一些 JS 函数和 CSS 样式。

是否可以将我的 html 文件加载到 Flutter Web 上的嵌入式小部件中?我已经使用 flutter_webview pacakge 在 iOS 和 Android 上成功完成了此任务,但尚未找到适用于 Flutter Web 的解决方案。


有一个HTMLElementView widget https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html它可以帮助您将 Html 嵌入到 flutter web 中。该小部件可以采用 Iframe 并渲染它。如果您不喜欢 Iframe 那么您可以简单地嵌入一个BodyElement来自dart:html直接图书馆。

嵌入 Iframe 的示例可用here https://github.com/flutter/flutter_web/blob/master/examples/html_platform_view/lib/main.dart。尽管它来自旧的存储库,但代码是有效的,而且我找不到最新的代码。

如果您不想走艰难的路,可以使用 Rodydavis 的简化小部件here https://pub.dev/packages/easy_web_view称为 easy_web_view。

不过,如果您需要代码示例、创建简单的 dart pad 并共享 MRE,我会尽力提供帮助。 :)

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

加载 HTML 文件并在 Flutter Web 中显示 的相关文章

随机推荐

  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 可靠的在线手册复制工具

    我经常需要在没有互联网的情况下开发项目 不幸的是 越来越多的程序不再有离线手册 在本地复制在线帮助的最佳方法是什么 HTTrack 网站复制器经常失败 哪个 Windows 工具最可靠 感谢你的建议 如果您有使用 HTTrack Websi
  • vue js中的process.env.BASE_URL是什么?

    当我使用 vue cli 安装 vue 时手动选择预设 我偶然发现了 process env BASE URL 我试图在互联网上找到它 但无济于事 我找不到任何像样的解释 这是代码 const router new VueRouter mo
  • mgwt - 以编程方式改变方向

    是否可以在 gwt mgwt 应用程序中更改强制执行特定的屏幕方向 可以说我希望用户始终以横向模式使用应用程序 这取决于 是作为phonegap应用程序 而不是在浏览器内部 如果您作为 Web 应用程序运行 则不需要t get any co
  • 战争库中的罐子爆炸

    我们可以将分解的 jar 文件放入 war web inf 库中吗 它在 JBOSS 4 2 中对我不起作用 我收到以下错误并且无法部署应用程序 Caused by javax management RuntimeOperationsExc
  • 如何在NavigationView的菜单项中设置椭圆形?

    我想在 NavigationView 的菜单项中设置 android ellipsize end 在我当前的实现中 当菜单项中的文本太长时 它只是在末尾被剪切 这是我到目前为止所尝试过的
  • 如何在引发异常时将变量传递给异常并在异常时检索它?

    现在我只有一个空白的异常类 我想知道如何在引发变量时给它一个变量 然后在 try except 中处理它时检索该变量 class ExampleException Exception pass 为其构造函数提供一个参数 将其存储为属性 然后
  • Codeigniter:在 Windows XP 中将错误显示为“无法选择指定的数据库:项目”

    我使用 Windows XP 并使用 EasyPHP 作为服务器 我已将 Codeigniter 与 TankAuth 集成 但是 当我尝试打开我的作业文件夹时 它显示错误 如下所示 Unable to select the specifi
  • 在服务器内部调用 Web 服务

    我有一个网络服务 getEmployee 当传递 id 时 它会获取单个员工的员工详细信息 同一服务器上的另一个 Web 服务 getEmployeeList 当传递一个部门时 它会获取整个员工列表 这将获取部门的 ID 然后调用 getE
  • 更改其他页面的主窗口内容

    在 WPF 应用程序的主窗口中 我有一个 Badged 元素 来自材料设计 这是我的代码
  • kafka中的Bootstrap服务器与zookeeper?

    为什么在 kafka consumer 中不推荐使用 Zookeeper 以及为什么建议使用 bootstrap 服务器 bootstrap server 有什么优点 Kafka消费者需要将偏移量提交给kafka并从kafka获取偏移量 由
  • 是否可以扩展现有的 Objective-C 块?

    我有一个使用标头中定义的块的类 如下所示 property readwrite copy RequestSucceededBlock succeededBlock 该物业succeededBlock已经设置了一个块 有没有办法用另一个仍然调
  • C# 中处理 SQL 死锁的模式?

    我正在用 C 编写一个访问 SQL Server 2005 数据库的应用程序 该应用程序是数据库密集型的 即使我尝试优化所有访问 设置适当的索引等 我预计迟早会遇到死锁 我知道为什么会发生数据库死锁 但我怀疑我能否在某个时候发布不发生死锁的
  • 为什么 spring-boot 应用程序不需要 @EnableWebMvc

    所以我写了一个小应用程序 为了熟悉基础知识 我使其尽可能简单 我使用 Config java 文件制作了一个简单的 mvc 应用程序 当我认为现在应用程序应该抛出错误时 它实际上可以工作 这是我的 pom xml
  • 通过 jQuery 从输入类型=“文件”多个中删除文件

    我在使用 PHP 和 jQuery 上传文件时遇到问题 表单可以一次上传多个图像 这些图像可以在滑块中预览 表单还包含两个字段标题和描述 滑块通过 jQuery 工作 当用户通过单击选择文件来选择多个图像时
  • 在 Android Studio 4.0(Canary) 中找不到预览窗口在哪里

    我正在浏览有关在 Android Studio 4 0 Canary 中运行的 Jetpack 的教程 请参阅下面的链接文章 https developer android com jetpack compose tutorial http
  • 带时间戳的 Firestore 查询

    如果它是文本字段 我可以使用 where 条件获取数据 但是当我尝试对时间戳字段和日期执行相同操作时 事情不起作用 这是我的代码 home ts firebase firestore collection cities where time
  • 从包含大量文件的目录中检索文件

    我的目录包含近 14 000 000 个 wav 格式的音频样本 所有普通存储 没有子目录 我想循环浏览文件 但是当我使用DirectoryInfo GetFiles 在该文件夹上 整个应用程序冻结了几分钟 可以用另一种方式完成吗 也许读取
  • 浏览器默认区域设置 - Intl.DateTimeFormat 与 navigator.language

    在对网站进行编码并格式化日期时 我想使用用户在浏览器中设置的区域设置 例如 如果用户定制了他们的chrome settings languages在 Chrome 中设置为非默认值 这就是我想要使用的值 但是 当我在此类浏览器的控制台中运行
  • 加载 HTML 文件并在 Flutter Web 中显示

    我有一个 HTML 文件 其中包含一些 JS 函数和 CSS 样式 是否可以将我的 html 文件加载到 Flutter Web 上的嵌入式小部件中 我已经使用 flutter webview pacakge 在 iOS 和 Android