跨浏览器无拦截 AJAX 回调弹窗

需求

用户点击“提交”后,若 AJAX 提交接口提示成功,则弹出某个汇总页的窗口。

原理

所有浏览器都不会拦截用户主动促发事件中的弹窗。一般认为,“用户主动促发”只包含 click 和 submit 。所以在 click 事件打开一个空白的新窗口,可以是一个写有 loadding title 的空白页面:

var newWin = window.open(“loadding Url”);

若 AJAX 成功后,用回调函数将刚刚打开窗口的 url 改成目标地址:

newWin.location.href = “target url”;

否则,关闭该窗口:

newWin.close();

由于 AJAX 所需的时间并不长,虽然分了两步,用户看起来却几乎是流畅的。

兼容IE

实践这个方法会发现 IE 报错提示权限不足,这时需要将:打开弹窗的页面、弹窗的 loadding 页面 和 弹窗的目标页面都设置在同一域名下。例如,都加上代码:

document.domain=”163.com”;

来源

感谢清华高材生 @weixiaoquan 童鞋的主意。类似思路应可应用于非 AJAX 回调的其它需要无拦截弹出窗口的场合上。