window.open 被拦截的处理方式

ajax提交中新标签页打开响应返回的url

  • 错误处理方式:

    ##触发按钮
    <a href="javascrip:void();" data-url="xxxx" id='jiedong' class='tixian'>解冻</a>
    
    ##绑定事件
    $("#jiedong").click(function (e) {
        $this = $(this);
        $this.text("处理中...");
        $.ajax({
            url: "xxxxxx",
            type: 'get',
            data: {},
            success: function(data){
                $this.text("解冻");
                if(data.status == 1) {
                    #新标签打开页面
                    window.open($this.attr("data-url");
                } else {
                  .....
                }
            },
            error: function () {
                alert("服务器异常");
            }
        });
    });
    
    
  • 原因分析及处理方案:

    • 原因:
      使用window.open打开url,浏览器会将该请求当成非用户操作。
      当浏览器检测到非用户操作产生的新弹出窗口,则会对其进行阻止。因为浏览器认为这不是一个用户希望看到的页面。
    • 处理方案:
      原a标签正常执行新开页面操作,只是生效时间放到执行click操作之后,即:a标签绑定data-remote=”true“属性,延迟执行超链接动作,当click返回true时才执行href的链接。
      注意:此时ajax提交要进行同步处理,不然超链接是不会等待ajax的请求处理完才执行了跳转操作。(默认是异步处理,所以需要设置async:true;)
  • 修正后处理方式:

    ##触发按钮
    <a href="xxxx" id='jiedong' class='tixian' data-remote="true" target="_blank">解冻</a>
      
    ## 绑定事件
    $("#jiedong").click(function (e) {
       $this = $(this);
       ## 设置标杆,便于ajax的处理结果向外渗透
       var flag = false;
       $this.text("处理中...");
       $.ajax({
            url: "xxxxxx",
            type: 'get',
            async: false,  ## 重要
            data: {},
            success: function(data){
                $this.text("解冻");
                if(data.status == 1) {
                      flag = true; ##向外渗透结果
                  } else {
                    .....
                  }
             },
             error: function () {
                  alert("服务器异常");
             }
          });
          
          ## 决定是否执行超链接动作
          return flag;
      });
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,523评论 0 17
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,933评论 18 139
  • 偶尔间看到儿子写的一篇作文: 我的妈妈很傻,她每天早上起来洗脸,都要啪啪啪地打脸。 我问她为什么要打自己的脸,她说...
    一只黄胖阅读 279评论 13 6