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

相关推荐
函数的彼端8 小时前
iOS Model Generator - 让 JSON 转模型变得简单高效
ios·json·cocoa
2501_915918419 小时前
HTTPS 端口深度解析,443 并不是唯一入口,理解 TLS 流量行为与抓包策略
网络协议·http·ios·小程序·https·uni-app·iphone
2501_916008899 小时前
iOS 开发者工具全景图,构建从编码、调试到性能诊断的多层级工程化工具体系
android·ios·小程序·https·uni-app·iphone·webview
ElenaYu9 小时前
在 macOS 上安装 iOS Simulator(iPhone 模拟器)
macos·ios·iphone
Digitally10 小时前
如何在没有电脑的情况下备份 iPhone
ios·电脑·iphone
儿歌八万首11 小时前
Flutter 混合开发指南:项目打包与原生 Android/iOS 集成
android·flutter·ios
如此风景11 小时前
iOS SwiftUI 布局容器详解
ios
2501_9159214311 小时前
从需求到上架,现代 iOS 开发流程的工程化方法论
android·ios·小程序·https·uni-app·iphone·webview
TouchWorld12 小时前
iOS逆向-哔哩哔哩增加3倍速播放(2)-[横屏视频-半屏播放]增加3倍速播放
ios·swift
1024小神13 小时前
xcode 中配置AR Resource Group并设置图片宽度等
ios·swiftui·ar·xcode·swift