当前位置: 首页 > news >正文

h5适配iOS——window.open失效

在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中,不推荐,还是推荐第一种。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • win10使用系统自带照片查看器的步骤
  • 电路笔记(信号) : 一个极简的DDS信号发生器
  • 巨魔商店2安装教程,支持最新iOS 17.0的所有型号
  • camera: TypeError: Cannot read properties of undefined reading ‘getUserMedia
  • linux 权限解读
  • 【云计算】什么是云计算服务|为什么出现了云计算|云计算的服务模式
  • 【算法每日一练及解题思路】判断数字是否为偶数
  • 成为一名厉害的黑客,必须知道的12个步骤,黑客入门
  • 斗破C++编程入门系列之二十:数组、指针和字符串:数组的声明和使用(一星斗师)
  • mysql与es数据同步
  • 考拉悠然董事长申恒涛受邀出席2024AGIC深圳通用人工智能大会
  • 视频结构化从入门到精通——行为分析类应用
  • GAMES202——作业4 Kulla-Conty BRDF(BRDF的预计算、重要性采样)
  • NTFS安全权限和文件共享
  • 宝藏!《联盟自控基础班筑基题库》(凤凰篇) 1-8章:甄选部分
  • 分享一款快速APP功能测试工具
  • Android 控件背景颜色处理
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • java中具有继承关系的类及其对象初始化顺序
  • js ES6 求数组的交集,并集,还有差集
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • OSS Web直传 (文件图片)
  • PAT A1017 优先队列
  • Python连接Oracle
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Swift 中的尾递归和蹦床
  • Vue2 SSR 的优化之旅
  • 找一份好的前端工作,起点很重要
  • 白色的风信子
  • kubernetes资源对象--ingress
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • #laravel 通过手动安装依赖PHPExcel#
  • #我与Java虚拟机的故事#连载07:我放弃了对JVM的进一步学习
  • #我与Java虚拟机的故事#连载08:书读百遍其义自见
  • (C#)一个最简单的链表类
  • (机器学习-深度学习快速入门)第三章机器学习-第二节:机器学习模型之线性回归
  • (原創) 系統分析和系統設計有什麼差別? (OO)
  • (转)C#调用WebService 基础
  • (转)shell调试方法
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET4.0并行计算技术基础(1)
  • .net6使用Sejil可视化日志
  • .NET开源项目介绍及资源推荐:数据持久层 (微软MVP写作)
  • .NET学习教程二——.net基础定义+VS常用设置
  • .NET中的Exception处理(C#)
  • ::什么意思
  • ??在JSP中,java和JavaScript如何交互?
  • @ConfigurationProperties注解对数据的自动封装
  • @staticmethod和@classmethod的作用与区别
  • @value 静态变量_Python彻底搞懂:变量、对象、赋值、引用、拷贝
  • @我的前任是个极品 微博分析
  • [1159]adb判断手机屏幕状态并点亮屏幕
  • [2023年]-hadoop面试真题(一)