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

相关推荐
末代iOS程序员华仔6 小时前
iOS上架海外工具类应用合规指南:避免封号与下架风险
flutter·ios·swift
末代iOS程序员华仔8 小时前
Flutter 开发 iOS App 上架全流程与常见问题分析
flutter·ios
末代iOS程序员华仔8 小时前
Flutter开发iOS海外工具类应用上架合规指南与风险规避
flutter·ios
AI云海1 天前
iOS 多 Target 打包、UAT/生产测试与上架 App Store 全流程指南
ios
阿里超级工程师1 天前
最新快速申请ios打包证书和profile文件步骤
ios·打包证书
2501_915909061 天前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 天前
TraceEagle 代理抓包详解,无感代理、去证书绑定与 HTTP/3 解密能力解析
网络协议·计算机网络·网络安全·ios·adb·https·udp
aiopencode1 天前
SwiftUI Introspect生产环境完全指南:为什么它是安全可靠的选择
后端·ios
for_ever_love__1 天前
iOS: 网络管理单例
学习·ios·objective-c
00后程序员张1 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone