一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

javascript超级弹窗 浏览阻止不了js弹窗代码

时间:2014-04-24 编辑:简简单单 来源:一聚教程网

这真的是弹窗最终奥义哦,噗~,以前曾写过一篇“终极弹窗解决方案,人类再也无法阻止弹窗了!”,这个终极版居然还是有漏洞,无奈只能另寻方法,连题目都不知道该如何拟定了,只好写一篇“人类再再也无法阻止弹窗了!”,你造么,我真不是来卖萌好么= o=

初衷:公司需求,点付款后,弹出一个支付是否成功的提示框,并在新窗口打开第三方支付页面,这种交互相信就算没做过,在网上也看到不少了。

有两种方法,基本思路是这样的:生成一个form,或者生成一个a,然后为对方指向一个URL,并且target为_blank,OK一切都美满了,这样浏览器连弹窗都认不得了。

其实这里还有个更简单的方法,没想到浏览器这么好骗,比如下面这段代码,把jquery指向元素触发点击事件;通过返回一个false阻止事件:

 代码如下 复制代码

 
$("#first").click(function(){
    window.open("http://www.111com.net");
    return false;
});

那这样就完了吗?其实不然,比如来短Ajax,你看看会出现什么情况:

 

 代码如下 复制代码
$("#first").click(function(){
    $.ajax({
        type: 'POST',
        url: '/deposit/paypoints',
        success: function(re) {
            window.open("http://www.111com.net");
            return false;
        }
    });
});

发现浏览器是不是发现你要弹窗了?神马情况?难道不是返回false了吗?

对,的确是返回false了,但是这里是一个“闭包函数”,返回的false值的对象是在ajax的success这个作用域下的,而并非事件对象下,当然没用啦

    另外我还看过一个奇葩的版本,至于为什么奇葩嘛,大家自己分析,这里不说明了

     

 代码如下 复制代码
    $("#first").click(function(){
        $.ajax({
            type: 'POST',
            url: '/deposit/paypoints',
            success: function(re) {
                // do sthing....
            }
        });
    
        window.open("http://www.111com.net");
        return false;
    });

那怎么对付阿贾克斯君呢?
弹窗解决最终奥义来啦!!

在这里我先将弹窗指向为一个对象,之后再对这个对象进行操作,比如说修改这个弹窗的URL神马的,听上去是不是很费解。先上代码:

 代码如下 复制代码

 
$("#first").click(function(){
    var w = window.open(), url, num = 0;
    $.ajax({
        type: 'POST',
        url: '/deposit/paypoints',
        success: function(re) {
            url = re.url;
        },
        error:function(){
            w.close();
            num = 20;
        }
    });
 
    var utime = setInterval(function(){
        if (url) {
            w.location = uurl;
            clearInterval(utime);
        } else if(num > 20) {
            w.close();
            clearInterval(utime);
        }
 
        unum++;
    }, 200);
});

我再来分析一遍:

    先简历一个window对象,我先open他
    创造一个空的URL对象,等待接收URL
    创造一个num,这里你可以叫他失败计数器
    好啦,阿贾克斯君跑起来了,异步的,他只做两件事:
        正确响应,赋值url
        失败关闭window,设置失败计数器到峰值
    创建一个0.2秒重复触发的定时器,做两个操作:
        正确获取到url,告诉window对象URL是神马
        失败计数器达到峰值,关闭window

说到这里,不知道你是否有了概念了,呃,没有。。。好吧,我来个简单的例子,有兴趣的朋友慢慢悟哦

例子

 代码如下 复制代码

javascript:void(0);" id="first">新窗口直接打开:乱炖 - 研究web


等待1秒,新窗口打开:乱炖 - 研究web(噗~,可能会被浏览器发现哦= =||)


新窗口先打开,1秒后得到URL:乱炖 - 研究web



新窗口打开,1秒后随即关闭


$("#first").click(function(){
   
    window.open("http://111com.net");
   return false;
});

$("#second").click(function(){
   
    setTimeout(function(){
    window.open("http://111com.net");
    }, 1000);
   
    return false;
});

$("#last").click(function(){
    var w=window.open();
    setTimeout(function(){
        w.location="http://111com.net";
    }, 1000);
   
    return false;
});
$("#last2").click(function(){
    var w=window.open();
    setTimeout(function(){
        w.close();
    }, 1000);
   
    return false;
});

热门栏目