SUI Mobile 的 $.alert 不是浏览器原生 alert。它显示页面中的模态框后,后续 JavaScript 会继续执行;需要等用户点“确定”再跳转,就把跳转放进确认回调。
为什么看不到提示就离开了页面
旧项目希望先提示用户,再打开后续页面,却把两个调用连续写在一起。下面用站内完成页代替原业务地址:
$.alert("操作已完成");
window.location.assign("/done");
第一句创建弹窗,第二句随即开始导航,用户未必来得及阅读。即使改成 window.open,也没有建立“用户确认后再执行”的关系,还会涉及浏览器的新窗口限制。
将依赖确认的动作放进回调
SUI Mobile 的这一接口支持将第二个参数作为确认回调:
$.alert("操作已完成", function () {
window.location.assign("/done");
});
需要指定标题时,则使用三个参数:
$.alert("操作已完成", "提示", function () {
window.location.assign("/done");
});
项目 modal.js 源码将 callbackOk 绑定到确定按钮的点击处理;这就是代码执行先后与用户交互先后之间的连接点。上述写法适用于有该接口的旧 SUI Mobile 环境,不是所有名为 alert 的组件都共用的协议。
先后顺序之外,还要分清业务状态
确认按钮只表示用户读完了提示,不证明支付或其他服务端操作已经完成。应先取得业务操作结果,再展示相应文案;失败时不应继续导航到成功页。
如果跳转目标来自外部输入,还要限制允许的目标地址,不能直接信任 query 中任意 URL。验证时分别观察弹窗出现、点击确认和导航三个时刻,才能确认流程符合预期。