技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 说说弹窗和新窗口打开拦截

说说弹窗和新窗口打开拦截

浏览:2629次  出处信息

一个想当老的话题,一般不是用户主动触发的弹窗和新窗口打开页面,现代浏览器就会将他们拦截。

但是在我们产品设计和开发的时候总是会碰到这些状况,比如和第三方网站合作的时候,需要新窗口打开页面,传递一些相关的数据,用户数据还要在这里验证,用户在第三方网站任务完成后,还要在我们的产品上继续用户的任务流程,所有似乎弹窗和新窗口打开第三方网站似乎是一个很好的选择,但是在我们产品,用户流程和程序设计不合理的时候,弹窗被拦截了。

在没有更好的方案实现上面说的那些情况的时候,我们只能通过程序设计和技术手段实现(关于产品的用户操作流程和产品的设计我们不讨论);

一种比较好的方案是:以新开窗口的方式(form标签上target属性设置为”_blank”)提交表单,将对应的数据提交(GET或POST方式都无所谓)到新开的处理页面(是本站的页面),新开的页面处理这些数据后,再跳转到对应的第三方页面,进行相应的操作。

这里建议在表单页面同时出现相应的操作提示,比如遮罩浮层或其他提示,以便用户在第三方网站操作完成的时候,在本站做相应的操作,或继续整个任务流程,比如最常见的完成充值后做相应的购买操作等等。

如果在当前表单页面ajax提交数据,后端处理后做相应的操作后返回对应的数据,有一个好处就是可以验证用户数据,如果数据错误可以直接在页面上提示用户修改,而不用在处理页面提示错误,再要用户来表单页面修改数据,再提交。以前新开窗口的方式打开页面可以使用模拟表单提交的方式打开新页面,但是现在不行了,至少在chrome下,模拟表单提交的方式打开新页面会被浏览器拦截。

上次在不断尝试中,发现了一个新方法:

首先声明:这个方法本人并不推荐,本人只有无奈的情况下可以使用(至于这个无奈并不想说什么,很多人的因素说也说不清楚的),而且这个方法存在一定的风险。

这个方法就是ajax同步形式提交,说到这里大家肯能会觉得大跌眼镜,ajax同步形式风险确实很大,ajax同步形式就是有了返回值后才会执行下面的js,他会阻止所有浏览器的其他操作,在数据返回前,浏览器处于假死状态,什么都动不了。但是他确实能解决上面说的问题。

看代码,以jQuery为例:

01var Rechargedata = "";
02var ajax = {
03    url: "/trade/addmoneysubmit",
04    data: $rechargeForm.serialize(),
05    type: 'POST',
06    async: false,//注意这里同步设置
07    dataType: 'json',
08    success: function (data) {
09        if (data.success) {
10            if (data.data !== "") {
11                Rechargedata = data.data;//这里是一个URL
12                PayMentWriteDialog.show();//显示一个遮罩浮层,用户在第三方操作完成后的对应操作
13            } else {
14                window.location = "/home";
15            }
16        }
17        else {//这里是错误提示
18            xbox.showMsg({
19                cls: 'error',
20                subTitle: '出错了',
21                msg: data.msg
22            });
23        }
24    }
25};
26$.ajax(ajax);
27//模拟新新窗口方式的表单提交以打开新开页
28if (Rechargedata !== "") {
29    var $tempForm = $('<form method="post" target="_blank" action="' + Rechargedata + '"></form>');
30    $("body").append($tempForm);
31    $tempForm.submit();

建议继续学习:

  1. 弹窗广告开发    (阅读:1951)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1