1. 场景:
官方商城在订单确认页面(order confirm page),点击确认订单
按钮时,需要走以下代码流程
- ajax 提交数据创建订单
- 如果上一步订单创建成功,跳转到支付通道去支付
2. 问题
但是使用以下几种代码,偶尔(并不是每次)会被浏览器拦截
2.1 ajax 之后,直接用 window.open(url)
略
2.2 ajax 之后,表单提交
示例:
页面放一个 form
<form id="payForm" action="/payment/goToPaymentDirect.htm" target="_blank"> <input type="hidden" name="subOrdinate" id="subOrdinate" value="" /> <input type="hidden" name="payType" id="payType" value="" /> </form>
在ajax 得到结果之后,将相关hidden 附上值,并 提交表单
$('#subOrdinate').val(subOrdinate); $('#payType').val(payType) $("#payForm").submit();
依然会被浏览器拦截
2.3 ajax 之后,设置一个 a标签, 然后模拟点击
示例:
页面放了个 空的a
<%-- 自定义提交链接 --%> <a id="paymentLink" ="" target="_blank" style="display:none"></a>
js 里面 ajax post 提交,拿到支付相关的链接, 通过赋予 a 链接href 属性,模拟click 事件实现
//订单确认 $j("#createOrderButton").click(function(){ var formData=getFormDataToSubmit(); //sConfirm('请您在新打开的页面中完成付款','付款完成前请不要关闭本页面!') var data = loxia.syncXhrPost(_contextPath+"/transaction/create",formData); if(null!=data && true==data.result){ var paymentFullRequestURL=data.paymentFullRequestURL; $j("#paymentLink").attr("href",paymentFullRequestURL); document.getElementById("paymentLink").click();//$j("#paymentLink").click();//这种方式不行 } });
以上代码, 曾在 2012年
左右测试是ok的, 这次再使用这招,依然有几率被浏览器拦截
3. 原因
当window.open
为用户触发事件或者加载时
,不会被拦截; 一旦将代码移动到ajax内时,可能就出现被拦截。
Ajax之后打开窗体,浏览器会认为可能是广告弹窗
类的代码
4. 解决方案
在stackoverflow找到了解决方案, 参见 Bypass popup blocker on window.open when JQuery event.preventDefault() is set
4.1 核心思想
先通过用户点击打开一个window,然后再对这个window进行重定向
4.2 流程:
-
在提交
ajax
之前, 先定义一个window
如
var windowObj = window.open();
-
提交
ajax
请求,此请求,需要是async:false
-
如果
ajax
成功, 那么将windowObj
附上新的地址, 如windowObj.location = paymentHref;
-
如果
ajax
失败或者异常, 那么需要将windowObj
关闭, 如windowObj.close();
4.3 示例代码:
$('#createOrder').on('tap',function(){ var windowObj = window.open(); //在提交 `ajax` 之前, 先定义一个 `window` $.ajax({ type: 'POST', url: base + '/transaction/create', dataType: 'json', async:false, //注意是 async:false success: function(result){ var subOrdinate = result.returnObject.subOrdinate; var payType=$('input[name="paymentInfoSubForm.paymentType"]').val(); var paymentHref=base+"/payment/goToPaymentDirect.htm?subOrdinate="+subOrdinate+"&payType="+payType; windowObj.location = paymentHref; //do something else //比如 弹出友好型提示层 }, error: function(){ //如果提交失败, 或者校验有问题, 这里需要关闭 打开的window windowObj.close(); } }); });
相关推荐
标题中的“【飞天奔月出品】windows版nginx 快速操控神器(启动start,关闭stop,重启restart) 批处理”指的是一个专为Windows操作系统设计的Nginx管理工具,它通过批处理脚本实现了Nginx服务的便捷启动、停止和重启...
2. **Web存储**:HTML5提供了本地存储机制,如localStorage和sessionStorage,使得游戏数据(例如用户得分、游戏进度等)能在用户关闭浏览器后仍然保留,为游戏提供非会话性的持久化功能。 3. **Audio API**:HTML5...
6. **数据存储**:使用`localStorage`或`sessionStorage`来保存用户的游戏进度、得分等信息,即使关闭浏览器后仍能保留。 7. **服务器环境**:由于HTML5游戏通常需要处理用户数据或与其他玩家交互,可能需要服务器...
首先,从形式与内容的角度看,《奔月》的语言风格独特,充满了扭曲和躁动,戏拟手法的运用使得传统神话的严肃性被打破,透露出鲁迅内心对人生的荒诞性和对英雄无路的悲哀。后羿的形象刻画得生动而立体,他不再是那个...
奔月生物:2021年半年度报告.PDF
"奔月游戏"作为一款H5游戏,其源码为我们提供了一窥H5游戏开发的窗口。本文将深入探讨这款H5游戏的源码结构、技术栈以及可能涉及的关键知识点。 首先,H5游戏源码通常包括HTML、CSS和JavaScript三大部分。HTML负责...
【长娥奔月模板下载TIF】是一个与网页设计相关的资源,主要提供了一种以"长娥奔月"为主题的网页模版。这个模版可能是为了庆祝中国传统节日,如中秋节,或者用于讲述中国古老的神话故事。"长娥奔月"是中国文化中的...
4. **本地存储**:HTML5的localStorage和sessionStorage可以用来持久化游戏数据,如玩家分数、进度等,即使用户关闭浏览器也能保存。 5. **Game Loop(游戏循环)**:所有游戏都基于某种形式的游戏循环,HTML5游戏...
【标题】:“奔月生物:2021年半年度报告.rar”是一个压缩文件,其中包含了一份关于奔月生物科技公司在2021年上半年业务运营、财务状况和业绩表现的详细报告。这类报告通常由上市公司发布,以供投资者、分析师和其他...
- 打开素材2,使用你喜欢的方法(例如钢笔工具或通道)将女孩抠出并拖入"奔月女孩"文件中,新图层命名为"女孩"。 - 使用自由变换(Ctrl+T)调整女孩的大小和位置。 3. **色彩平衡调整**: - 选择"女孩"图层,通过...
【山东奔月生物科技股份有限公司2019年半年度报告】是该公司在当年的一个重要财务信息披露文件,旨在向公众和投资者展示公司在前六个月的经营状况、财务数据和重大事件。以下是对报告中关键知识点的详细解析: 1. *...
HTML5兔子奔月吃月饼游戏源码是一款基于HTML5技术开发的互动小游戏,适用于网页环境,无需额外插件即可在现代浏览器中运行。这款游戏利用了HTML5的核心特性,包括Canvas绘图、JavaScript编程以及可能涉及的Web Audio...
另外,HTML5的Web Storage API(包括localStorage和sessionStorage)可以用于存储游戏进度或用户设置,使得玩家可以在关闭浏览器后重新打开游戏时继续之前的进度。这在兔子吃月饼游戏中,可能意味着玩家的分数、关卡...
中考热点专题二嫦娥二号成功发射 开创奔月新纪元
【标题】"小游戏源码-火贱兔奔月.rar" 提供的是一个小型游戏的源代码,名为"火贱兔奔月"。这类源码通常用于教学、学习或游戏开发者的参考,帮助开发者理解游戏的基本架构和编程逻辑。 【描述】"小游戏源码-火贱兔...
《鲁迅的《奔月》:颠覆传统,开创审美新向度》 鲁迅的短篇小说《奔月》是其《故事新编》中的一篇,它颠覆了我们对古代神话的传统认知,尤其对嫦娥这一角色的刻画,使得这篇作品在文学史上占据了独特的地位。鲁迅...
CSS3引入了许多新特性,如转换(transform)、过渡(transition)和动画(animation),这些都可能被用于游戏中的视觉特效,使游戏更具有吸引力。 JavaScript是这个HTML5游戏的核心,负责处理用户的输入、游戏逻辑...
【嫦娥二号卫星的成功发射】标志着中国在航天科技领域的重大进步,这是一次重要的航天探索活动,开创了中国奔月的新纪元。嫦娥二号作为嫦娥一号的升级版,搭载了更高分辨率的CCD相机和其他改进的探测设备,获取了...
游戏源码分享下载 --- hjby.zipHTML5小游戏【火贱兔奔月--425款经典优秀H5小游戏合集】游戏源码分享下载 --- hjby.zipHTML5小游戏【火贱兔奔月--425款经典优秀H5小游戏合集】游戏源码分享下载 --- hjby.zipHTML5小...