`

【飞天奔月出品】Ajax提交数据之后,打开新窗口被浏览器拦截总结

    博客分类:
  • ajax
阅读更多

 

1. 场景:

官方商城在订单确认页面(order confirm page),点击确认订单按钮时,需要走以下代码流程

  1. ajax 提交数据创建订单
  2. 如果上一步订单创建成功,跳转到支付通道去支付

2. 问题

但是使用以下几种代码,偶尔(并不是每次)会被浏览器拦截

image

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 流程:

  1. 在提交 ajax 之前, 先定义一个 window

    如 var windowObj = window.open();

  2. 提交 ajax 请求,此请求,需要是 async:false

  3. 如果 ajax 成功, 那么将 windowObj 附上新的地址, 如 windowObj.location = paymentHref;

  4. 如果 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();
        }
 
    });
});
 

5. 参考

0
0
分享到:
评论

相关推荐

    【飞天奔月出品】windows版nginx 快速操控神器(启动start,关闭stop,重启restart) 批处理

    标题中的“【飞天奔月出品】windows版nginx 快速操控神器(启动start,关闭stop,重启restart) 批处理”指的是一个专为Windows操作系统设计的Nginx管理工具,它通过批处理脚本实现了Nginx服务的便捷启动、停止和重启...

    HTML5奔月游戏

    2. **Web存储**:HTML5提供了本地存储机制,如localStorage和sessionStorage,使得游戏数据(例如用户得分、游戏进度等)能在用户关闭浏览器后仍然保留,为游戏提供非会话性的持久化功能。 3. **Audio API**:HTML5...

    火箭兔奔月HTML5游戏源码

    6. **数据存储**:使用`localStorage`或`sessionStorage`来保存用户的游戏进度、得分等信息,即使关闭浏览器后仍能保留。 7. **服务器环境**:由于HTML5游戏通常需要处理用户数据或与其他玩家交互,可能需要服务器...

    鲁迅《奔月》作品分析.pdf

    首先,从形式与内容的角度看,《奔月》的语言风格独特,充满了扭曲和躁动,戏拟手法的运用使得传统神话的严肃性被打破,透露出鲁迅内心对人生的荒诞性和对英雄无路的悲哀。后羿的形象刻画得生动而立体,他不再是那个...

    奔月生物:2021年半年度报告.PDF

    奔月生物:2021年半年度报告.PDF

    H5游戏源码 奔月游戏.zip

    "奔月游戏"作为一款H5游戏,其源码为我们提供了一窥H5游戏开发的窗口。本文将深入探讨这款H5游戏的源码结构、技术栈以及可能涉及的关键知识点。 首先,H5游戏源码通常包括HTML、CSS和JavaScript三大部分。HTML负责...

    长娥奔月模板下载TIF

    【长娥奔月模板下载TIF】是一个与网页设计相关的资源,主要提供了一种以"长娥奔月"为主题的网页模版。这个模版可能是为了庆祝中国传统节日,如中秋节,或者用于讲述中国古老的神话故事。"长娥奔月"是中国文化中的...

    HTML5奔月游戏 源码.zip

    4. **本地存储**:HTML5的localStorage和sessionStorage可以用来持久化游戏数据,如玩家分数、进度等,即使用户关闭浏览器也能保存。 5. **Game Loop(游戏循环)**:所有游戏都基于某种形式的游戏循环,HTML5游戏...

    奔月生物:2021年半年度报告.rar

    【标题】:“奔月生物:2021年半年度报告.rar”是一个压缩文件,其中包含了一份关于奔月生物科技公司在2021年上半年业务运营、财务状况和业绩表现的详细报告。这类报告通常由上市公司发布,以供投资者、分析师和其他...

    Photoshop合成奔月女孩梦幻艺术照片效果.doc

    - 打开素材2,使用你喜欢的方法(例如钢笔工具或通道)将女孩抠出并拖入"奔月女孩"文件中,新图层命名为"女孩"。 - 使用自由变换(Ctrl+T)调整女孩的大小和位置。 3. **色彩平衡调整**: - 选择"女孩"图层,通过...

    奔月生物:2019年半年度报告.PDF

    【山东奔月生物科技股份有限公司2019年半年度报告】是该公司在当年的一个重要财务信息披露文件,旨在向公众和投资者展示公司在前六个月的经营状况、财务数据和重大事件。以下是对报告中关键知识点的详细解析: 1. *...

    HTML5兔子奔月吃月饼游戏源码

    HTML5兔子奔月吃月饼游戏源码是一款基于HTML5技术开发的互动小游戏,适用于网页环境,无需额外插件即可在现代浏览器中运行。这款游戏利用了HTML5的核心特性,包括Canvas绘图、JavaScript编程以及可能涉及的Web Audio...

    HTML5实现兔子中秋奔月吃月饼游戏源码.zip

    另外,HTML5的Web Storage API(包括localStorage和sessionStorage)可以用于存储游戏进度或用户设置,使得玩家可以在关闭浏览器后重新打开游戏时继续之前的进度。这在兔子吃月饼游戏中,可能意味着玩家的分数、关卡...

    中考热点专题二嫦娥二号成功发射 开创奔月新纪元.ppt

    中考热点专题二嫦娥二号成功发射 开创奔月新纪元

    小游戏源码-火贱兔奔月.rar

    【标题】"小游戏源码-火贱兔奔月.rar" 提供的是一个小型游戏的源代码,名为"火贱兔奔月"。这类源码通常用于教学、学习或游戏开发者的参考,帮助开发者理解游戏的基本架构和编程逻辑。 【描述】"小游戏源码-火贱兔...

    析鲁迅《奔月》.docx

    《鲁迅的《奔月》:颠覆传统,开创审美新向度》 鲁迅的短篇小说《奔月》是其《故事新编》中的一篇,它颠覆了我们对古代神话的传统认知,尤其对嫦娥这一角色的刻画,使得这篇作品在文学史上占据了独特的地位。鲁迅...

    HTML5兔子奔月吃月饼游戏源码.zip

    CSS3引入了许多新特性,如转换(transform)、过渡(transition)和动画(animation),这些都可能被用于游戏中的视觉特效,使游戏更具有吸引力。 JavaScript是这个HTML5游戏的核心,负责处理用户的输入、游戏逻辑...

    专题嫦娥二号成功发射开创奔月新纪元.doc

    【嫦娥二号卫星的成功发射】标志着中国在航天科技领域的重大进步,这是一次重要的航天探索活动,开创了中国奔月的新纪元。嫦娥二号作为嫦娥一号的升级版,搭载了更高分辨率的CCD相机和其他改进的探测设备,获取了...

    HTML5小游戏【火贱兔奔月-425款经典优秀H5小游戏合集】游戏源码分享下载 - hjby.zip

    游戏源码分享下载 --- hjby.zipHTML5小游戏【火贱兔奔月--425款经典优秀H5小游戏合集】游戏源码分享下载 --- hjby.zipHTML5小游戏【火贱兔奔月--425款经典优秀H5小游戏合集】游戏源码分享下载 --- hjby.zipHTML5小...

Global site tag (gtag.js) - Google Analytics