zoukankan      html  css  js  c++  java
  • ajax请求后弹开新页面被浏览器拦截

         window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口!

         最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了!

         代码如下:

    $.getJSON(URL,data,function(data,state){
        if(state=='success'){
             window.open('http://www.cnblogs.com/garfieldzhong/');
        }else{
             alert('请求失败!');
        }
    })
    View Code

         

         这要手动允许弹出窗口,开发的东西可是给要给用户玩的,这样的拦截显然是玩不转的!

         这让我百思不得其解,于是乎,只有到百度里谷歌之,发现,原来,这居然是浏览器出于对安全的考虑,把这种非用户操作的行为给拦截了!这如果不解决掉显然是有损助用户体验的!

         方法倒也挺多的,不过,有些方法试了貌似是行不通的!比如创建一个a标签,getJson完了去触发a的点击,事实证明这方法对此无效;还有加定时器的,这貌似也不行,而且,加定时器这事个人觉得也挺不靠谱的,毕竟,你无法预知网友的网速等等,不确定性太在!

         这里介绍下个人亲自试过,而且有效的方法!

         方法一:

         

    $("#btn").on("click",function(){
        var goto = window.open();
        $.getJSON(URL,data,function(data,state){
            if(state=='success'){
                 goto.location.href = 'http://www.cnblogs.com/garfieldzhong/'
            }else{
                 alert('请求失败!');
            }
        })
    });
    View Code

        此方法,可以实现新窗口打开新页面,不过,它有个问题,那就是当异步请求失败了,也依然会有一个新窗口打开,因为它的原理很明显,是一开始打开一个空的新窗口,然后改变新窗口的url,以此来实现跳转。这似乎与我们的要求不太符合。所以找来了第二种方法!

        方法二:

    $("#btn").on("click",function(){
        $.ajaxSettings.async = false; //请求前设置为同步请求
        $.getJSON(URL,data,function(data,state){
            $.ajaxSettings.async = true;//切记,请求完成之后要设置回异步
            if(state=='success'){
                 goto.location.href = 'http://www.cnblogs.com/garfieldzhong/'
            }else{
                 alert('请求失败!');
            }
        })
    });
    View Code

        关键词就是$.ajaxSettings.async,设置了ajax请求的方法,请求前为同步请求,这样就能避免被浏览器拦截,但是,不推荐使用同步方法,所以,当此次ajax/getjson完了之后要把值改回 true。

        目前,因为本人水平不限,只能用这样的方法来实现,不知道哪位大神有没有更好的方法,希望能给予指导啊!

  • 相关阅读:
    解决 DBMS_AW_EXP: BIN$*****==$0 not AW$
    物化视图(materialized view) 实现数据迁移、数据定时同步
    Mysql exists 与 in
    ORACLE DATAGUARD 进程
    ORACLE DATAGUARD SWITCHOVER 步骤
    Oracle Dataguard failover 操作步骤
    Python 包管理(PYPA)
    Emacs Org-mode 4 超连接
    Emacs Org-mode 3 表格
    ycmd for emacs 代码自动补全
  • 原文地址:https://www.cnblogs.com/garfieldzhong/p/4731528.html
Copyright © 2011-2022 走看看