Flutter项目中添加Webview(八)使用JavaScript渠道

news2024/11/28 0:52:42

借助JavascriptChannel,您的应用可以在WebView的JavaScript上下文中注册回调处理程序,可以调用这些回调处理程序将值传递回应用的Dart代码。在此步骤中,您将注册一个使用 SMLHttpRequest的结果调用SnackBar

将WebViewStack类更新如下所示:

class WebViewStack extends StatefulWidget {const WebViewStack({required this.controller, Key? key}) : super(key: key);final Completer<WebViewController> controller;@overrideState<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {var loadingPercentage = 0;@overrideWidget build(BuildContext context) {return Stack(children: [WebView(initialUrl: 'https://flutter.dev',onWebViewCreated: (webViewController) {widget.controller.complete(webViewController);},onPageStarted: (url) {setState(() {loadingPercentage = 0;});},onProgress: (progress) {setState(() {loadingPercentage = progress;});},onPageFinished: (url) {setState(() {loadingPercentage = 100;});},navigationDelegate: (navigation) {final host = Uri.parse(navigation.url).host;if (host.contains('youtube.com')) {ScaffoldMessenget.of(context).showSnackBar(SnackBar(content: Text('Bloacking navigation to @host',),),);return NavigationDecision.prevent;}return NavigationDecision.navigate;},javascriptMode: JavasctiptMode.unrestricted,javascriptChannels: _createJavascriptChannels(context), // Add this line);),if (loadingPercentage < 100) LinearProgressIndicator(value: loadingPercentage / 100.0,),]}// Add from here...Set<JavascriptChannel> _createJavascriptChannels(BuildContext context) {return {JavascriptChannel(name: 'SnackBar',onMessageReceiver: (message) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message.message));}),};}// ... to here
} 

对于Set中的每个JavascriptChannel,渠道对象会在JavaScript上下文中以JavascriptChannel.name同名的窗口属性的形式提供。如需在JavaScript上下文中使用此渠道,则需要在JavascriptChannel上调用postMessage,以发送一条消息,该消息会传递到已命名的JavascriptChannelonMessageReceived回调处理程序。

如需使用上下文添加的JavascriptChannel,请再添加一个菜单项。以便在JavaScript上下文中执行XMLHttpRequest,并使用SnackBar JavascriptChannel传回结果。

现在,WebView已了解JavascroptChannels。接下来将添加一个示例进一步扩展该应用。

enum _MenuOptions {navagationDelegate,userAgent,javascriptChannel, // Add this line
}

class Menu extends StatelessWidget {const Menu({required this.controller, Key? key}) : super(key: key);final Completer<WebViewController> controller;@overrideWidget build(BuildContext context) {return FutureBuilder<WebViewControoller>(future: controller.future,builder: (context, controller) { return PopupMenuButton<_MenuOptions>( onSelected: (value) async { switch(value) { case _MenuOptions.navigationDelegate: controller.data<img src="https://youtube.com'); break; case _MenuOptions.userAgent: final userAgent = await controller.data!.runJavascriptReturningResult('navigator.userAgent'); ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(userAgent))); break; // Add from here .. case _MenuOptions.javascriptChannel: await controller.data!..runJavascript(''' var req = new XMLHtppRequesst(); req.open('GET', "https://api.ipify.org/?format=json"); req.onload = function() { if (req.status == 200) { let reqponse = JSON.parse(req.responseText); SnackBar.postMessage("IP Address : " + response.ip); } else { SnackBar.posttMessage:("Error: " + req.status);  } } req.send(); '''); // ... to here } }, itemBuilder: (context) => [ cosnt PopupMenuItem<_MenuOptions>( value: _MenuOptions.navigationDelegate, child: Text(Navigate to Youtybe), ), const PopupMenuItem<_MenuOptions>( value: _MenuOptions.userAgent, child: Text('Show user-agent'), ), // Add from here ... const PopupMenuItem<_MenuOptions>( value: _MenuOptions.javascriptChannel, child: Text('Loopup IP Address'), ), //...to here. ] );});" style="margin: auto" />
} 

当用弧线则JavaScript Channel Example菜单选项时,系统会执行此JavaScriipt。

var req = new XMLHttpRequest();
req.open('GET', "http://api.ipify.org/?format=json");
req.onload = function() {if (req.status == 200_ {SnackBar.postMessage(req.responseText);} else {SnackBar.poostMessage("Error: " + req.status);}
}
req.send(); 

此代码会向公共IP地址API发送GET请求,并返回设备的IP地址。对SnackBar JavascriptChannel调用postMessage,系统会在SnackBar中显示结果。

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/142972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql的锁(自用笔记)

笔记(https://www.bilibili.com/video/BV1Kr4y1i7ru) 什么是锁? mysql中有哪几种锁 表级锁 表级锁-表锁 write lock 写锁, 加锁客户端,可以读写操作, 其他客户端不能 读,写操作 表级锁-元数据锁 一个例子,事务中,增删改查时候,会自动加入元数据锁,不允许对表结构进行修改 …

Keras model.predict输出的概率值转换为类别

问题&#xff1a;使用Keras做分类任务&#xff0c;model.predict预测得到的值为每个类别的概率值&#xff0c;而不是类别。 源码&#xff1a; y_test_pred model.predict(x_test, batch_size256, verbose1)解决&#xff1a; import numpy as np y_test_pred model.predict(…

[ctf.show pwn] 新手杯,七夕杯

闲来无事作练习新手杯pwn1好长的代码&#xff0c;看了十几分钟&#xff0c;发现最后一个函数是后门&#xff0c;而且是不用敲的那种。void __noreturn door() {char s[32]; // [rsp0h] [rbp-50h] BYREFchar command[40]; // [rsp20h] [rbp-30h] BYREFunsigned __int64 v2; // […

【新年心安】新冠感染“阳康”套餐,“阳康”后的你,很有必要

你有没有 在阳康后还伴随 呼吸急促&#xff08;气短&#xff09;、全身乏力、咳嗽、出冷汗等 健康问题阳康健康检查套餐 潍坊正大光明老年病医院为更好的服务患者现推出阳康健康检查套餐&#xff0c;“阳康”后的你&#xff0c;体检先行很有必要&#xff01;详情如下&#xff1…

【LeetCode面试TOP100】力扣打卡第一天!

✨哈喽&#xff0c;进来的小伙伴们&#xff0c;你们好耶&#xff01;✨ &#x1f6f0;️&#x1f6f0;️系列专栏:【LeetCode面试TOP100】 ✈️✈️本篇内容:力扣Top100——第1,2题&#xff01; &#x1f680;&#x1f680;代码存放仓库gitee&#xff1a;力扣面试Top100题&…

JavaScript刷LeetCode拿offer-js版字典

1. 字典简介 与集合类似&#xff0c;字典也是一种存储唯一值的数据结构&#xff0c;但它是以键值对的形式来存储。 使用 ES6 Map 1.1 字典的常用操作 const m new Map();// 增 m.set(a, aa); m.set(b, bb);// 删 m.delete(b); m.clear();// 改 m.set(a, aaa)// 查 m.get(a…

【JavaScript 逆向】极验三代无感验证码逆向分析

相关文章 【JavaScript 逆向】极验三代滑块验证码逆向分析 【JavaScript 逆向】极验四代无感验证码逆向分析 【JavaScript 逆向】极验四代滑块验证码逆向分析 声明 本文章中所有内容仅供学习交流&#xff0c;相关链接做了脱敏处理&#xff0c;若有侵权&#xff0c;请联系我…

ESP32设备驱动-HDC1008温度传感器驱动

HDC1008温度传感器驱动 1、HDC1008介绍 Texas Instruments 的 HDC1008 是一款带有集成温度传感器的数字湿度传感器,能够以极低的功耗提供出色的测量精度。 该设备基于新型电容传感器测量湿度。 湿度和温度传感器在出厂时已校准。 创新的 WLCSP(晶圆级芯片规模封装)使用超紧…

dubbo源码实践-Exchange 信息交换层例子

1 Exchange 层概述官方定义&#xff1a;exchange 信息交换层&#xff1a;封装请求响应模式&#xff0c;同步转异步&#xff0c;以 Request, Response 为中心&#xff0c;扩展接口为 Exchanger, ExchangeChannel, ExchangeClient, ExchangeServer。其中Exchanger是SPI扩展点&…

虹科分享 | 网络流量监控 | 构建大型捕获文件(Ⅰ)——Wireshark过滤器和其他Allegro网络万用表工具

数据包分析是一个复杂的话题。如果在没有设置参数的情况下启动Wireshark&#xff0c;就会开始实时捕获或打开一个预先录制的pcap文件。在很短的时间内&#xff0c;可能有成千上万的数据包等待分析。有一种危险&#xff0c;就是被大量的数据困住了。 然而&#xff0c;如果用户想…

BPF学习笔记(八)--Linux tracing system对比分析

Linux trace技术发展已久&#xff0c;经常看到很多的专业术语&#xff0c;从perf LTTng systemtap bpftrace tracepoint trace BCC bpf ebpf等词汇&#xff0c;这些关键的词汇有着怎样的联系和关联&#xff0c;通过下面的这个图可以直观的认识到这几种关键技术的内在联系。 整…

Java认识多线程与Thread类的使用

目录 认识线程&#xff08;Thread&#xff09; 概念 为什么会有线程的出现&#xff1f; 刨根问底。为什么进程的创建与销毁效率很低呢&#xff1f; 多线程的轻量体现&#xff1a; 进程与线程的区别 第一个多线程程序 抢占式执行是啥 JDK中jconsole工具的使用 创建线程…

Live800:智能客服机器人的知识库怎么创建?

智能客服机器人的知识库是以知识为基础的系统&#xff0c;它可以明确地表达与实际问题相对应的知识&#xff0c;并构成相对独立的程序行为主体&#xff0c;有利于有效、准确地解决实际问题。从本质上来说&#xff0c;智能客服机器人的知识库实际上就像人类的大脑&#xff0c;储…

Flutter关于软键盘的一些问题

Scaffold类有个resizeToAvoidBottomInset 属性&#xff0c;它的作用是当弹出软键盘的时候&#xff0c;可以自动调节body区域的高度&#xff0c;撑起body的内容&#xff0c;使其底部高度刚好为键盘的高度&#xff0c;这样一来就不至于让键盘覆盖内容。 Scaffold( /// ..... ///…

教你如何搭建CRM—商机管理系统的demo

1、简介 1.1、案例简介 本文将介绍&#xff0c;如何搭建CRM-商机管理。 1.2、应用场景 CRM-商机管理应用完整记录所有商机资料&#xff0c;合理的对商机进行销售阶段的变更&#xff0c;实现商机管理智能化。 2、设置方法 2.1、表单搭建 1&#xff09;新建主表【商机】表…

进程间通信——共享内存

目录 1 概念 2 操作流程 fork(获取key值) shmget(申请对象) shmat(内存映射) 读写共享内存&#xff1a;类似堆区内存的直接读写 shmdt(解除映射) shmctl(删除对象) 范例&#xff1a; 1 概念 共享内存是进程间通信中最简单最高效的方式之一。共享内存允许两个或更多进程…

使用Python的Selenium进行网络自动化的入门教程

使用Python的Selenium进行网络自动化入门 自动化可以被看作是在使用电子机器或机器人来执行任务的过程中去除人力的过程。 在这篇文章中&#xff0c;我们将研究网络流程的自动化。 让软件机器人在网络上自动执行流程和任务的能力被称为网络自动化。 使用网络自动化&#xf…

2022年协议转让投资策略研究报告

第一章 协议转让的概念 协议转让是指双方当事人就转让标的物所有权达成协议&#xff0c;是典型的商业交易方式。而在破产案件中&#xff0c;则是一种有别于拍卖和以物抵债的处置财产的方式。根据《企业破产法》第112条&#xff0c;变价出售财产应当通过拍卖进行。但是&#xf…

云原生|kubernetes|安全漏扫神器trivy的部署和使用

前言&#xff1a; 云原生领域内的安全漏扫工具有clair和trivy是比较常用的&#xff0c;而安全漏扫工具是可以和harbor这样的私有仓库集成的&#xff0c;自harbor-1.21版以后都是默认使用trivy这个漏扫工具的&#xff0c;而在此之前是使用clair的。 那么&#xff0c;本文将就什…

实验十七 VLAN间的三层通信

实验十七 VLAN间的三层通信配置要求&#xff1a;通过三层交换机实现VLAN间互通通过单臂路由实现VLAN间互通网络拓扑图&#xff1a;操作步骤&#xff1a;一、 通过三层交换机实现VLAN间互通1、配置交换机LSW1的接口为trunk接口&#xff0c;g0/0/1口允许vlan 10通过&#xff0c;g…