h5适配iOS——window.open失效

news2024/9/24 5:27:56

在H5开发中,打开一个新的标签页一般使用window.open。安卓中没啥限制,但是iOS的Safari出于安全限制,想使用该方法打开新的网页,必须得有用户手动触发,用代码自动打开是会失效的。

也就是说,window.open必须是绑定在button之类的点击事件中。

我得使用场景是:用户想要付款时,点击付款按钮,然后前端向后端发起请求,后端返回URL,然后前端收到URL后使用window.open来打开支付宝的唤起页面。

这里由前端收到URL后再自动打开对应URL在iOS是行不通的。

所以得改变流程:

  1. 将URL的获取改为前端在某个时机自动获取。
  2. 按钮的点击事件直接绑定window.open(url),由用户手动点击打开支付宝的页面

这里的问题就是:URL是动态的,比如我用的是vue3,如果想用@click="window.open(alipayUrl)"
在这里插入图片描述
是无法直接调用该方法的。需要先在script中定义一下:const thisWindow=window,这样就可以用thisWindow来调用open方法。

还有个方法:

将动态的URL绑定到window中:
在这里插入图片描述
然后onclick="window.open(alipayUrl)"使用onclick而不是@click来执行js代码。

不过这种方法要将url绑定到window中,不推荐,还是推荐第一种。

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

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

相关文章

VS配置QGIS二次开发(VS2019+QT5+QGIS3.14)

1.1 QGIS软件下载 QGIS软件是基于QT5开发的GIS系统,其易用性及其高效性使其已经成为当下极具竞争力的GIS系统,其占有率足以与Esri的ArcGIS等主流GIS软件分庭抗礼。QGIS软件因其开源特性也使得其广受广大GIS开发者的青睐。 在本次《地理信息系统设计与开…

风趣图解LLMs RAG的15种设计模式-第二课

全部用的是Midjourney连续性一致性绘图画成

前端报文加密

前端加密功能 前端提供简单的AES对称加密算法,注意key 和后端网关配置相同,这里打包混淆后,相对安全。 (lun-ui\src\store\modules\user.js、base-gateway-dev.yml) 后端解密功能 使用hutool提供的工具类进行解密pub…

鸿蒙开发基础知识 第二篇【页面布局】

鸿蒙开发基础知识 第二篇 1. 两端对齐 demo 2.交叉轴对齐方式 demo 3.列表项布局 demo 4.自适应伸缩布局 demo 自行练习 5.弹性布局 flex 换行布局 demo 案例 更多鸿蒙技能知识与案例 我已经整理到下面了 ↓↓↓ 快去看那看吧! 点击下方↓↓↓↓↓↓↓…

【C++】类和对象(三)再探构造函数|static成员函数|友元函数|内部类|匿名对象|对象拷贝时的编译优化

欢迎来到HarperLee的学习笔记! 一、再探构造函数 初始化列表:构造函数初始化的第二种方式(第一种是使用函数体内赋值)。使用方式:以一个冒号:开始,用逗号,分隔数据成员列表,每个成员变量后面跟…

Linux 命令行/bash脚本 批量创建文件

目录 一. 命令行1.1 需求1.2 代码 二. bash脚本2.1 需求2.2 前置知识2.3 无进度条版本2.3.1 知识点2.3.2 代码2.3.3 效果 2.4 有进度条版本2.4.1 代码2.4.2 效果 一. 命令行 1.1 需求 在当目录下生成指定年份的文件,要求从生成1月到12月,每个月份的文件…

如何使用 update-alternatives 切换软件版本 ?

Debian 中的 update-alternatives 命令是系统上多版本软件管理的利器。它允许您轻松地在同一程序的不同版本之间切换。假设您在单个系统上安装了多个 Java 版本或 Python 版本,在 update-alternatives 的帮助下,您可以将程序的任何版本设置为系统的默认版…

SAP MM模块与FI模块集成之科目配置

1. 定义评估范围 OMWD 评估范围设置在工厂层,那么系统自动建立和工厂具有相同ID的评估范围 IMG:物料管理>评估和科目设置>科目确定>无向导的科目确定>将评估范围群集分组 提示:评估层级——评估分组代码——评估范围。 2. OBYC…

【Unity案例】搭建射击系统与UI

上期将基础的移动系统搭建完毕后就可以开始搭建更加复杂的系统部分了 前排提示,由于一开始仅思考如何完成操作相关功能,以至于到后面重构稍微有些困难,继续写下去恐成屎山,故在搭完射击和武器UI后不再继续泛化到敌人和敌人状态机…

SF-HCI-SAP问题收集18:员工上级经理无效

导读 INTRODUCTION CPI集成:这几天一直在处理SuccessFactors与SAP集成的问题,因为没有给deubg权限,排查比较困难,这次讲解的案例就是一个比较难发现的案例,在同步员工主数据的时候提示,经历在某个区间无效…

前端原生Js批量修改页面元素属性的2个方法

前言 嘿,朋友们!今天咱们来聊聊一个前端原生 JS 的小技巧。 今天在做一个 RPA 机器人时,碰到一个业务需求,网页上有两个日期控件元素,它们的输入框有 readonly 属性,只能通过选择的方式来输入日期&#x…

数据库和MySQL

ER图 实体(矩形):通常是现实世界的业务对象,当然使用一些逻辑对象也可以。 属性(椭圆):实体拥有的属性。 联系(菱形):实体与实体之间的关系。 函数依赖 函数依…

idea 编译断点运行 tomcat 10.1.28 源码

idea 编译运行 tomcat 10.1.28 源码 1. 所需资源 tomcat 10.1.28 zulu JDK 22 maven idea (支持 JDK 22) 2. Idea 导入项目 10.1.28.tar.gz 解压到指定文件夹 如 ~\tomcat-source\tomcat-10.1.28 这里等待一段时间,生成 ~\tomcat-source\tomcat-10.1.28\.idea 文…

双向链表

双向链表是一种基本的数据结构,它与单向链表的主要区别在于节点的连接方式。下面我将分别描述双向链表的特点以及它与单向链表的区别。 双向链表的特点: 节点结构:在双向链表中,每个节点包含三个部分:数据域、指向前一…

WordPress自适应美图网站整站打包源码

直接服务器整站源码数据库打包了,恢复一下就可以直接投入使用。保证好用易用,无需独立服务器就可以使用。 强调一下,我这个和其他地方的不一样、不一样、不一样。具体的看下面的说明。 现在网络上同样的资源包都是用的加密带后门的主题&…

[C++11#47] (四) function包装器 | bind 函数包装器 | 结合使用

目录 一. function包装器 1. 在题解上 2.bind 绑定 1.调整参数顺序 2.对类中函数的包装方法 一. function包装器 function包装器也叫作适配器。C中的function本质是一个类模板,也是一个包装器。 那么我们来看看,我们为什么需要function呢&#xff1…

[数据集][目标检测]机油泄漏检测数据集VOC+YOLO格式43张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):43 标注数量(xml文件个数):43 标注数量(txt文件个数):43 标注类别数…

基于SSM的献血管理系统设计与实现(论文+源码)_kaic

摘 要 近年来,随着科技的飞速发展,在全球经济一体化的大背景下,我们面临着巨大的挑战,互联网技术将进一步提高社会综合发展的效率和速度,而且也会涉及到各个领域。献血管理系统在网络背景下有着无法忽视的作用&#x…

Xilinx FPGA 原语解析(三):OBUFDS差分输出缓冲器(示例源码及仿真)

目录 前言: 一、原语使用说明 二、原语实例化代码模版 三、使用示例 1.设计文件代码 2.仿真文件代码 3.仿真结果 前言: 主要参考 Xilinx 官方文档《Xilinx 7 Series FPGA and Zynq-7000 All Programmable SoC Libraries Guide for HDL Designs》…

网络工程师学习笔记——局域网和城域网(二)

快速以太网 快速以太网(802.3u 100Mbps) 其中多模光纤的芯线直径为62.5…