前端打开新窗口被拦截的问题及解决方案
发布于 3 年前 作者 yong48 1221 次浏览 来自 分享

场景

原因

当浏览器检测到非用户操作产生的新弹出窗口,则会对其进行阻止。常见的场景如下
1、非用户操作页面产生的跳转,如进入页面直接跳转:

2、尽管是用户操作页面产生的跳转,但产生了异步逻辑(我们项目中常见的就是ajax回调中使用跳转)例如点击事件中使用了定时器:

需要注意的是:当等待时间小于5000毫秒时,不会拦截,例如将上面的定时器改为1000毫秒

结果:正常跳转

解决方案

针对场景一,将非用户操作引起的跳转改为__用户操作触发的__同步跳转,比如通过click事件

针对场景二,预先跳转到一个空页面,等待异步操作完成之后再赋值新窗口的链接

这种方案会导致等待五秒的空白页面时间,因此__不太适合长时间等待回调__的场景,针对这种场景,我们可以在异步回调执行后,弹出一个弹窗让用户点击后在执行跳转,将其转化为用户操作引起的同步跳转:

点击跳转

正常跳转

在实际开发中我们可以弹出一个确认弹窗,在执行跳转的方式代替上面的a标签,产经会更容易接受,例如凡科快图工具箱水印的导入快图作品,导入成功后给出提示,点击确认后再执行跳转

还有一种解决办法,比如场景是保存并预览的(保存接口完成时打开一个页面),保存按钮需要有旋转动画,不能直接先开一个空白页,然后保存好了之后跳转到再给空白页赋值一个链接(交互体验不好的同时,空白页会等待过久),这种情况就可以使保存接口改为同步,也不会有拦截问题。

回到顶部