在html文件Flutter中使用js文件

2024-03-10

如何在 Flutter 中使用与 html 关联的 js 文件。我使用 webview_flutter 插件加载index.html文件并且它可以工作,但是我无法加载js文件 这是我的颤振代码:

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: WebView(
    initialUrl: '',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      _webViewController = webViewController;
      _loadHtmlFromAssets();
    },
  ),



  _loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString('files/index.html');
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());

  }

这是我的 html 文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" **src="files/plotter.js**"></script>
<title>Test plotter</title>
</head>
<body>
<!-- <script type="text/javascript" src="plotter.js"></script> -->
<div id='test'></div>


<script type="text/javascript">

这是控制台中显示的消息

I/chromium(31201): [INFO:CONSOLE(86)] "Uncaught ReferenceError: Plotter is not defined", source: data:text/html;charset=utf-8,%

无需读取资产,然后从数据 uri 加载,只需传递资产路径,如下所示:

  _loadHtmlFromAssets() async {
    _webViewController.loadUrl('file:///android_asset/flutter_assets/files/index.html');
  }

在index.html文件中,脚本路径应该是相对的。对我来说,index.html 和 index.js 位于同一路径中,所以这是有效的:

<script src="index.js"></script>

And my pubspec.yml看起来像这样:

  assets:
    - files/index.html
    - files/index.js

Edit

平台独立的解决方案使用本地资产服务器 https://pub.dev/packages/local_assets_server:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:local_assets_server/local_assets_server.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) => MaterialApp(home: MyWidget());
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String address;
  int port;
  bool isListening = false;

  @override
  initState() {
    _initServer();
    super.initState();
  }

  _initServer() async {
    final server = new LocalAssetsServer(
      address: InternetAddress.loopbackIPv4,
      assetsBasePath: 'files',
    );
    final address = await server.serve();
    setState(() {
      this.address = address.address;
      port = server.boundPort;
      isListening = true;
    });
  }

  List<String> propList = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My WebView'),
      ),
      body: !isListening ? Center(child: CircularProgressIndicator()) : WebView(
          initialUrl: 'http://$address:$port',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
          }),
    );
  }
}

对于 Android,添加usesCleartextTraffic="true"在清单文件中:

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

在html文件Flutter中使用js文件 的相关文章

  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 如何在 jQuery 中将标题转换为 URL slug?

    我正在 CodeIgniter 中开发一个应用程序 我试图在表单上创建一个字段来动态生成URL slug 我想做的是删除标点符号 将其转换为小写 然后用连字符替换空格 例如 Shane s Rib Shack 将变成 shanes rib
  • Pjax动画

    我终于让 pjax 工作了 但我还有另一个问题 如何添加一些 jquery 动画 如淡出 幻灯片旧内容和淡入 幻灯片新内容 默认情况下 pjax 只是更改内容 没有任何好看的效果 任何帮助将非常感激 此致 基本上 你有一堆事件 https
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • 自调用函数未定义

    如果我声明一个函数文字 var x function alert hi console log x returns the function code However var x function alert hi console log
  • 修改 Twitter 帖子上可编辑 Div 的内容

    我正在编写一个 chrome 扩展 它可以帮助用户在 Twitter 上输入内容 当在 twitter 上写推文时 twitter 会打开一个可编辑的 div 容器 当用户输入内容时 twitter 大概正在使用某些网络框架 会生成子 di
  • Rangy:插入符号下的单词(再次)

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • for循环中需要声明变量吗?

    有什么区别 for var i 0 i lt 5 i for i 0 i lt 5 i 是否有必要包含 var 关键字 我知道 var 关键字会影响变量范围 但我无法理解是否有必要在 for 循环中包含该关键字 在第二个示例中 您的变量是全
  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 当我使用 ListView 时,ListTile OnTap 正在工作。但是当我使用 ListWheelScrollView 时它不起作用

    当我使用 ListView 时 ListTile OnTap 正在工作 但是当我使用 ListWheelScrollView 时它不起作用 我的意思是它不会被窃听 观点发生变化 但我似乎无法点击它 我在很多地方和链接中寻找解决方案 但仍然找
  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它
  • Vue-Router 抽象父路由

    我正在尝试将当前网站迁移到 vuejs 站点地图必须是 login signup password reset browse search dozens of other routes 由于其中一些路线共享大量 fx 因此我将它们设为父路线
  • 如何获取符号名称(文字)?

    以下情况 var myVehicle brand Tesla var isMoving Symbol var currentStatus Symbol myVehicle isMoving true myVehicle currentSta
  • Keycloak-js updateToken(minValidity) 需要澄清

    我在Keycloak js中阅读了很多该方法的示例 但没有对以下方法进行明确的解释 updateToken minValidity number KeycloakPromise

随机推荐

  • 通过spring AOP + Aspectj进行异常处理

    在我的项目中 我有一个域层 它基本上是 POJO 和一个位于域层之上的 Spring 控制器 服务层 我还有一个位于服务和域之间的 AOP 层 我的域层正在抛出业务异常 这些异常现在正在服务层中处理 但是我想更改它 以便从领域层抛出的异常将
  • Backbone.js 视图的合适粒度是多少?

    我正在采用 Backbone js 来渲染一个小角落现有的大型网络应用程序 http www esvonline org 如果进展顺利 我可以看到 Backbone js 不断发展以涵盖整个应用程序 为有机增长的应用程序提供一些急需的结构
  • 了解Scheme函数

    我们的编程语言练习考试中给出了以下问题 我很难理解它是如何工作的 有人能告诉我代码流程是什么吗 我已经在球拍中运行过它并且知道答案是什么 看起来第一个 lambda 函数将其他两个函数作为参数 但输入在哪里 lambda x 2 and l
  • 在 C 中创建字符串的宏

    替代标题 以帮助搜索 将预处理器标记转换为字符串 我怎样才能从一个字符串C宏的价值 原始问题 我想用C define在编译时构建文字字符串 该字符串是因调试 发布等而更改的域 我想做这样的事情 ifdef TESTING define IV
  • 是否有 Perl 模块可以连接 Google Contacts API?

    我想编写一个命令行程序来将联系人添加到 GoogleMail WWW 联系方式 Google联系方式 http search cpan org dist WWW Contact GoogleContactsAPI似乎只能从 Google 获
  • 多核机器上 .NET 操作的非线性扩展

    我在 NET 应用程序中遇到了一种奇怪的行为 该应用程序对一组内存数据执行一些高度并行的处理 当在多核处理器 IntelCore2 Quad Q6600 2 4GHz 上运行时 它会在启动多个线程来处理数据时表现出非线性扩展 当在单核上作为
  • Wix升级:预选功能

    我们使用 Wix 来创建我们的安装程序 我们使用的用户界面可以选择需要安装的功能 某些功能默认启用 其他功能则禁用 但是 当我们运行升级时 这些默认值将被保留 我们希望安装程序记住安装了哪些功能 并在功能树中启用它们以进行升级 应禁用所有其
  • Railsinstaller 遇到问题

    我在 Windows 8 笔记本电脑上遇到了 Railsinstaller 问题 这是由于无法使用以下命令在 项目 目录中运行服务器rails s命令 但是与许多教程相反 我每次都会收到这个命令 C Sites demo gt rails
  • 商业产品中的 JavaFX [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我想使用 JavaFX 作为大型商业产品的开发框架 我可以在不违反 Oracle 许可的情况下关闭未来产品的源代码并使用 Oracle JavaFX
  • 我想显示第一个列表中的第一个单词并显示第二个列表中的 10 个单词,依此类推-python。我尝试使用 range 和 zip。它仍然不起作用

    在这里 我正在创建一个名为 li 的列表 其中包含标签文本和名为 list2 的列表 其中包含 span 文本 我使用 zip 附加它 现在 我有一个名为 name 的第三个列表 它有 2 个值 最活跃者 增益者 我想要 Mostactiv
  • 在 dataclasses.field 中使用显式 __init__ 构造函数和 default_factory 参数时,数据类属性丢失

    以下代码创建一个数据类Obj带有 int 字段n默认值为 0 from dataclasses import dataclass field dataclass class Obj n int field default factory i
  • scala:匹配对象的类型参数

    例如 如果我有一个接受 Type 参数的类Seq T 我有很多此类的对象 我想根据类型参数拆分它们T 例如 val x List Seq Int 1 2 3 4 5 6 7 8 9 0 Seq String a b c x foreach
  • 错误:管道的另一端没有进程

    我正在使用 SQL Server 2012 仅限本地主机 和 SQL Server Management Studio SSMS 来查看包含二进制值 图片 的表图片 大小为 928 行 大小并不大 只有那张桌子有问题 即使在重新启动 SQL
  • 如何在DataGridViewTextBoxCell和DataGridViewComboBoxCell之间切换?

    我想要一个有两列的 DataGridView 第一列始终为 DataGridViewComboBoxColumn 类型 根据该列中的选择 我希望能够将第二列中的相应单元格更改为 DataGridViewComboBoxCell 或 Data
  • CQRS、DDD同步报告数据库

    我们正在尝试 CQRS 和 DDD 以及事件溯源 假设我有一位客户更新了电子邮件地址 这会触发 CustomerUpdatesEmailAddress 事件 这会进入我的操作 写入数据库 并更新表 我们的系统设计为有一个运行的 ETL 流程
  • 有没有办法在 F# 中通过字符串获取记录字段?

    我想通过用字符串查找来获取记录中字段的值 type Test example string let test example this is the value let getByName s string something like t
  • 使用 pd.concat 时添加标识原始数据框的列

    我有一个数据框字典 如下所示 test df1 pd DataFrame col1 3 5 1 4 col2 3 5 1 4 df2 pd DataFrame col1 3 5 1 4 col2 3 5 1 4 df3 pd DataFra
  • lit-element Web Components 和 React 之间的主要区别[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 查看 React 代码 它似乎与 Lit Element 代码更相似 两者都可以用于创建 Web 组件
  • nullptr_t 是默认的可构造类型吗?

    我无法从 C 11 标准判断 nullptr t 是否有默认构造函数 换句话说 以下内容有效吗 nullptr t n GCC 和 VC 允许上述代码 但 clang 不允许 我在标准中找不到任何内容指定它没有默认构造函数 而我能找到的内容
  • 在html文件Flutter中使用js文件

    如何在 Flutter 中使用与 html 关联的 js 文件 我使用 webview flutter 插件加载index html文件并且它可以工作 但是我无法加载js文件 这是我的颤振代码 return Scaffold appBar