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

相关推荐
90后的晨仔8 小时前
第5章:基础状态管理
ios
90后的晨仔8 小时前
第4章:基础布局系统
ios
90后的晨仔9 小时前
第3章:基础视图组件
ios
Digitally14 小时前
iTunes 无法连接到此 iPhone - 9 种解决方法
ios·iphone
2501_9160074717 小时前
iOS逆向工程:详细解析ptrace反调试机制的破解方法与实战步骤
android·macos·ios·小程序·uni-app·cocoa·iphone
REDcker17 小时前
Safari 26.4 新增 WebTransport:对 iOS WebView 的影响与落地建议
前端·ios·safari
00后程序员张18 小时前
前端可视化大屏制作全指南:需求分析、技术选型与性能优化
前端·ios·性能优化·小程序·uni-app·iphone·需求分析
产品人卫朋19 小时前
硬件产品分析:Selfix背屏手机壳 - iPhone 17 Pro的后摄自拍救星?
ios·智能手机·iphone
REDcker21 小时前
iOS 与 Android:浏览器引擎、WebView 与生态差异概览
android·ios·内核·浏览器·webview
美狐美颜sdk21 小时前
视频平台如何实现实时美颜?Android/iOS直播APP美颜SDK接入指南
android·前端·人工智能·ios·音视频·第三方美颜sdk·视频美颜sdk