建设信用卡购物网站/哪个浏览器不屏蔽网站
long time no see. 如果觉得该方案helps,点个赞,评论打个call,这是我前进的动力~
通常写法:
项目里用的webview_flutter
正常webview处理返回事件
if (await controller.canGoBack()) {controller.goBack();
} else {Navigator.pop(context);
}
就是h5历史栈,一直退栈,如果栈内元素只有一个了,就直接关闭webview的页面了。
问题描述:
正常情况是没问题的的。
比如A-->B-->C,一直触发返回事件的话,逻辑是C-->B,B-->A, A直接关。
如果h5里有重定向的话,就有问题了。
比如A(A1重定向到A2)-->B-->C,一直触发返回事件的话,逻辑是C-->B,B-->A2, A2-->A1-->A2,A2-->A1-->A2...
导致webview界面一直退不出来。
解决方案:
参考https://github.com/flutter/flutter/issues/137737,拉到最下面
设定pageFinished后xxx毫秒内NavigationRequest触发,判定为重定向。逻辑:已知A1重定向A2,此时触发返回事件,A2返回到A1,在A1准备重定向到A2的时候,根据条件判断为重定向然后进行阻断,并再次执行一次返回逻辑。
另外该issue原始代码还是有问题,没有考虑到NavigationRequest可能跑在onPageFinished前面,故自己添加了轮询等待的代码。
注意:这只是workaround,极端情况下并不能做到100%可靠。必要情况可以考虑跟h5相关开发,约定不用重定向或改用其它方案。
自己在android设备上实测了下,还是挺稳定的。
几种可以考虑的方案:
1.修改flutter_webview源码,上传到github,然后在自己的仓库引用该库。(该方案可以自己去修改到android测和ios测的相关代码,比如flutter_webview没提供忽略ssl证书报错和ssl证书检查的问题就可以通过该方式解决,感兴趣的话可以上网查一查)
2.换webview的库,比如用flutter_inappwebview,该库提供更强大的原生api支持,围绕这个库的api来尝试解决。也是很流行的库,但不是官方flutter.dev出品。
解决代码:
如下
class WebPageContainer extends StatefulWidget {const WebPageContainer({super.key});@overrideState<WebPageContainer> createState() => _WebPageContainerState();
}class _WebPageContainerState extends State<WebPageContainer> {late WebViewController controller;String url = '';bool _backEventTriggered = false;DateTime? _lastedPageFinishedTime;bool _pageIsFinished = false;@overridevoid initState() {super.initState();}@overridevoid didChangeDependencies() {final Map<String, dynamic>? arguments = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>?;if (arguments != null) {url = arguments['url'] ?? '';debugPrint('third---url:$url');}super.didChangeDependencies();_initWebViewController();}// web端调用// <button onclick="jump()">打开一个新的webpage</button>// function jump() {// var msg = "https://www.baidu.com"// if (toNewWebPage) {// toNewWebPage.postMessage(msg);// }// }// getStatusBarHeight用法// h5页面调用getStatusBarHeight,同上// h5页面同时要定义onStatusBarHeightReceived,该方法是flutter测获取完高度后调用的// 例如:// function onStatusBarHeightReceived(height) {// // 显示状态栏高度// document.getElementById('statusBarHeight').innerText = 'Status Bar Height: ' + height;// }void _initWebViewController() {controller = WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(const Color(0x00000000))..setNavigationDelegate(NavigationDelegate(onProgress: (int progress) {// debugPrint('WebPage onProgress $progress');},onPageStarted: (String url) {_pageIsFinished = false;debugPrint('WebPage onPageStarted $url');},onPageFinished: (String url) async {debugPrint('WebPage onPageFinished $url');_pageIsFinished = true;if (_backEventTriggered) {_lastedPageFinishedTime = DateTime.now();} else {_lastedPageFinishedTime = null;}},onWebResourceError: (WebResourceError error) {},onNavigationRequest: (NavigationRequest request) async {debugPrint('WebPage onNavigationRequest ${request.url}');debugPrint('WebPage onNavigationRequest isMainFrame ${request.isMainFrame}');//轮询,因为onNavigationRequest可能跑在onPageFinished前面,强制等待while (!_pageIsFinished) {await Future.delayed(Duration(milliseconds: 10));}if (_shouldApplyNavLockout()) {goBack(); //执行第二次backreturn NavigationDecision.prevent;}return NavigationDecision.navigate;},onUrlChange: (UrlChange change) {print('WebPage onUrlChange ${change.url}');}),)..addJavaScriptChannel('destoryCurrentPage', onMessageReceived: (JavaScriptMessage message) {//h5自己的返回键,返回到最后一步,当前页面出栈debugPrint('====destoryCurrentPage====');Nav.pop();})..addJavaScriptChannel('toNewWebPage', onMessageReceived: (JavaScriptMessage message) {//允许h5页面打开新的third_web_pageNav.push(routerName: RouterPathModuleCommon.WebPageContainer, arguments: {'url': message.message});})..addJavaScriptChannel('toLogin', onMessageReceived: (JavaScriptMessage message) {//login:有些h5页面跳转后需要登录的 logout:可能存在的h5页面提供登出功能Nav.push(routerName: RouterPathModuleAccount.LoginPage, arguments: {'url': message.message});})..addJavaScriptChannel('getStatusBarHeight', onMessageReceived: (JavaScriptMessage message) {double statusBarHeight = MediaQuery.of(context).padding.top;controller.runJavaScriptReturningResult("onStatusBarHeightReceived('$statusBarHeight')").then((value) => print("发送statusBarHeight成功"));});controller.loadRequest(Uri.parse(url));}// 判断重定向的条件: 最近一次pageFinished和navigationRequest小于xxx毫秒。 这只是个workaround,并不是十全十美的方案bool _shouldApplyNavLockout() {final timestamp = _lastedPageFinishedTime;_lastedPageFinishedTime = null;// TODO make the threshold time configurable.if (timestamp != null) {debugPrint('WebPage diff timestamp ${DateTime.now().difference(timestamp!)}');}return timestamp != null && DateTime.now().difference(timestamp) < const Duration(milliseconds: 150);}void goBack() async {if (await controller.canGoBack()) {_backEventTriggered = true;controller.goBack();} else {Navigator.pop(context);}}@overrideWidget build(BuildContext context) {return Scaffold(body: WillPopScope(onWillPop: () async {goBack();return false;},child: WebViewWidget(controller: controller),),);}
}
相关文章:

flutter 解决webview加载重定向h5页面 返回重复加载问题
long time no see. 如果觉得该方案helps,点个赞,评论打个call,这是我前进的动力~ 通常写法: 项目里用的webview_flutter 正常webview处理返回事件 if (await controller.canGoBack()) {controller.goBack(); } else {Navigator…...

STM32的寄存器是几位的?
STM32的“32”顾名思义就是32位的意思 但是STM32 的寄存器并不都是 32 位的,它们的位宽取决于具体的寄存器和处理器架构。STM32 是基于 ARM Cortex-M 系列内核的微控制器,而这些内核的寄存器通常有不同的位宽。 具体来说,STM32 微控制器的寄…...

基于python的汽车数据爬取数据分析与可视化
一、研究背景 基于提供的代码片段和讨论,我们可以得出一个与网络抓取、数据处理和数据可视化相关的研究背景,该背景涉及到汽车行业。以下是研究背景的陈述: "在迅速发展的汽车行业中,准确和及时的数据对各方利益相关者至关…...

使用mtools搭建MongoDB复制集和分页集群
mtools介绍 mtools是一套基于Python实现的MongoDB工具集,其包括MongoDB日志分析、报表生成及简易的数据库安装等功能。它由MongoDB原生的工程师单独发起并做开源维护,目前已经有大量的使用者。 mtools所包含的一些常用组件如下: mlaunch支…...

Redis(配置文件属性解析)
一、tcp-backlog深度解析 tcp-backlog是一个TCP连接的队列,主要用于解决高并发场景下客户端慢连接问题。配置文件中的“511”就是队列的长度,对联与TCP的三次握手有关,不同的linux内核,backlog队列中存放的元素(客户端…...

思维导图+实现一个登录窗口界面
QQ2024122-205851 import sys from PyQt6.QtGui import QIcon, QPixmap, QMovie from PyQt6.QtWidgets import QApplication, QWidget, QLineEdit, QPushButton, QLabel, QVBoxLayout# 封装我的窗口类 class LoginWidget(QWidget):# 构造函数def __init__(self):# 初始化父类su…...

T507 buildroot linux4.9之RTC8563开发调试
文章目录 前言一、硬件确认1.1、RTC8563硬件二、驱动配置2.1、驱动位置2.2、使用config宏配置驱动2.3、DTS配置三、断电重启时间不保存分析四、解决问题五、测试前言 调试T507的RTC8563,解决中调试遇到的问题 一、硬件确认 1.1、RTC8563硬件 通过原理图确认 RTC8563 硬件的…...

网络安全专业术语
网络安全专有名词详解 1.肉鸡 被黑客操控的终端设备(电脑、服务器、移动设备等等),黑客可以随心所欲的操作这些终端设备而不会被发觉。 2.木马 表面上伪装成正常的程序,但是当这些程序运行时候就会获取整个系统的控制权限&#…...

【大数据学习 | Spark-SQL】关于RDD、DataFrame、Dataset对象
1. 概念: RDD: 弹性分布式数据集; DataFrame: DataFrame是一种以RDD为基础的分布式数据集,类似于传统数据库中的二维表格。带有schema元信息,即DataFrame所表示的二维表数据集的每一列都带有名称和类型…...

zerotier实现内网穿透
zerotier的内网穿透 前言一、zerotier的框架认知二、客户端安装设置1.linux2.windows 前言 摸索了一阵,看了好几篇,没有讲清楚。争取这次说清楚。 一、zerotier的框架认知 先认识一下zerotier的框架,这样如何处理就很好理解了。 首先上zero…...

Ardusub源码剖析——control_althold.cpp
代码 #include "Sub.h"/** control_althold.pde - init and run calls for althold, flight mode*/// althold_init - initialise althold controller bool Sub::althold_init() {if(!control_check_barometer()) {return false;}// initialize vertical maximum sp…...

Vue前端开发-路由的基本配置
在传统的 Web 页面开发过程中,可以借助超级链接标签实现站内多个页面间的相互跳转,而在现代的工程化、模块化下开发的Web页面只有一个,在一个页面中需要实现站内各功能页面渲染,相互跳转,这时些功能的实现,…...

HarmonyOS JSON解析与生成 常用的几个方法
HarmonyOS 使用 JSON解析与生成 的好处 一、轻量级与高效性 易于阅读和编写:JSON格式的数据易于人类阅读和编写,降低了数据处理的复杂性。高效解析与生成:HarmonyOS的JSON解析库提供了一系列高效的函数和类,能够快速地将JSON字符串…...

Docker 进阶指南:常用命令、最佳实践与资源管理
Docker 进阶指南:常用命令、最佳实践与资源管理 Docker 作为一种轻量级的容器化技术,已经成为现代软件开发和部署不可或缺的工具。本文将为您深入介绍 Docker 的常用命令、最佳实践以及如何有效管理容器资源,帮助您更好地在 Ubuntu 22.04 或…...

【前端】特殊案例分析深入理解 JavaScript 中的词法作用域
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯案例代码💯词法作用域(Lexical Scope)与静态作用域什么是词法作用域?代码执行的详细分析 💯函数定义与调用的…...

Jmeter进阶篇(29)AI+性能测试领域场景落地
🏝️关于我:我是綦枫。一个顺手写写代码的音乐制作人。 前言 随着2022年GPT3.5的问世,我们的社会已经进入了AI时代,这是一个全新的风口,也会迎来全新的挑战和机遇。如果能抓住新时代的风口,你将会在进步的路上越走越快。今天让我们来一起探究一下,在软件性能测试领域,…...

理解和应用 Python Requests 库中的 .json() 方法:详细解析与示例
理解和应用 Python Requests 库中的 .json() 方法:详细解析与示例 在使用 Python 的 requests 库进行网络请求时,.json() 方法是一种非常实用的功能,用于将从 API 获取的 JSON 格式的字符串响应转换为 Python 可操作的字典或列表。这一功能的…...

docker 运行my-redis命令
CREATE TABLE orders ( order_id bigint NOT NULL COMMENT "订单ID", dt date NOT NULL COMMENT "日期", merchant_id int NOT NULL COMMENT "商家ID", user_id int NOT NULL COMMENT "用户ID", good_id int NOT NULL COMMENT "商…...

cloudstack概要及单节点安装部署
概要 Apache CloudStack 是一个开源的云计算管理平台,用于管理和部署大规模的虚拟化环境,支持 IaaS(基础设施即服务)模型。它广泛应用于私有云、公共云和混合云场景。 核心功能 多租户支持 提供隔离的虚拟网络、计算资源和存储资…...

Android Gradle 相关
JDK环境配置: 1、Gradle运行时的JDK,即Gradle需要用到的JDK,配置如下: 如需修改现有项目的 Gradle JDK 配置,请依次点击 File(或者 macOS 上的 Android Studio)> Settings > Build, Exe…...

SpringMVC:入门案例
从此开始,我们步入SpringMVC的学习。 SpringMVC是一种基于Java实现MVC模型的轻量级Web框架 先来看一下web程序是如何工作的: 因为是异步调用,所以后端不需要返回view视图,将其去除前端如果通过异步调用的方式进行交互࿰…...

LuaForWindows_v5.1.5-52.exe
Releases rjpcomputing/luaforwindows GitHub #lua C:\Users\Administrator\Desktop\test.lua print("Hello lua!") print("ZengWenFeng 13805029595")...

密码学实验工具--Cryptool2
一、 Cryptool2的下载与安装 请参考我的另一篇笔记 二、 Caesar密码 2.1 Caesar密码加解密 1. 在Starcenter中直接搜索caesar的模板。 2. 打开caesar Cipher的模板后,工作区上面已经有了输入框,密钥框,输出框 输入框:要加密…...

量化交易系统开发-实时行情自动化交易-8.1.TradingView平台
19年创业做过一年的量化交易但没有成功,作为交易系统的开发人员积累了一些经验,最近想重新研究交易系统,一边整理一边写出来一些思考供大家参考,也希望跟做量化的朋友有更多的交流和合作。 接下来会对于TradingView平台介绍。 T…...

Vue2 常见知识点(二)
使用简单的代码逻辑,理一理实现逻辑 为了方便理解,案例中,没有使用虚拟dom和抽象语法树,是通过直接操作dom来实现的 1.模板语法 先看一个简单的实现: this.compile( this.$el ); 执行模板编译,如果是文本…...

SAP-ABAP开发-第二代增强示例
CUSTOMER EXIT 以VA01为例 目录 一、查找出口 二、出口对象 三、销售订单的增强 一、查找出口 ①查找事务代码的主程序 ②搜索CALL CUSTOMER-FUNCTION SE37下查看函数 函数名称命名规则:EXIT_<程序名>_<序号> ③使用函数查找:MODX_FU…...

UDP 协议与端口绑定行为解析:理解 IP 地址和端口的绑定规则
UDP 协议与端口绑定行为解析:理解 IP 地址和端口的绑定规则 1. UDP 协议与端口绑定基础2. UDP 端口绑定行为与示例3. 关键结论:占有权与消息接收权4. 异常现象:多个程序绑定 0.0.0.0:80805. 端口共享与操作系统的行为差异6. 实践建议与最佳实践7. 总结在网络通信中,UDP(用…...

【Vue3】【Naive UI】<n-message>标签
【Vue3】【Naive UI】标签 content (String | VNode) 【VUE3】【Naive UI】<NCard> 标签 【VUE3】【Naive UI】<n-button> 标签 【VUE3】【Naive UI】<a> 标签 【VUE3】【Naive UI】<NDropdown&…...

C++ 变量和常量:开启程序构建之门的关键锁钥与永恒灯塔
目录 一、变量 1.1 变量的创建 1.2 变量的初始化 1.3 变量的分类 1.4 变量的初始化 二、常量 2.1 字面常量 2.2 #define定义常量 2.3 const 定义常量 一、变量 1.1 变量的创建 data_type name; | | | | 数据类型 变量名 ------------- int age; //整型变量 char ch; …...

Linux部分实用操作
目录 1、快捷键 2、软件安装 3、systemctl 4、ln命令创建软连接 5、IP地址 6、主机名 7、域名解析 8、网络传输 ping wget curl命令 9、端口 10、进程 11、主机状态 查看系统资源占用--top 磁盘信息监控--df--iostat 网络状态监控--sar -n DEV 12、环境…...