标签：
—- 4月25日更新
这真的是弹窗最终奥义哦，噗～，以前曾写过一篇“终极弹窗解决方案，人类再也无法阻止弹窗了！”，这个终极版居然还是有漏洞，无奈只能另寻方法，连题目都不知道该如何拟定了，只好写一篇“人类再再也无法阻止弹窗了！”，你造么，我真不是来卖萌好么＝ o＝
初衷：公司需求，点付款后，弹出一个支付是否成功的提示框，并在新窗口打开第三方支付页面，这种交互相信就算没做过，在网上也看到不少了。
再来回顾下之前的那篇文章：
有两种方法，基本思路是这样的：生成一个form，或者生成一个a，然后为对方指向一个URL，并且target为_blank，OK一切都美满了，这样浏览器连弹窗都认不得了。
其实这里还有个更简单的方法，没想到浏览器这么好骗，比如下面这段代码，把jquery指向元素触发点击事件；通过返回一个false阻止事件：
|
1
2
3
4
|
$("#first").click(function(){ window.open("http://levi.cg.am"); return false;}); |
那这样就完了吗？其实不然，比如来短Ajax，你看看会出现什么情况：
|
1
2
3
4
5
6
7
8
9
10
|
$("#first").click(function(){ $.ajax({ type: ‘POST‘, url: ‘/deposit/paypoints‘, success: function(re) { window.open("http://levi.cg.am"); return false; } });}); |
发现浏览器是不是发现你要弹窗了？神马情况？难道不是返回false了吗？
对，的确是返回false了，但是这里是一个“闭包函数”，返回的false值的对象是在ajax的success这个作用域下的，而并非事件对象下，当然没用啦
另外我还看过一个奇葩的版本，至于为什么奇葩嘛，大家自己分析，这里不说明了
$("#first").click(function(){$.ajax({type:‘POST‘,url:‘/deposit/paypoints‘,success:function(re) {// do sthing....}});window.open("http://levi.cg.am");returnfalse;});
那怎么对付阿贾克斯君呢？
在这里我先将弹窗指向为一个对象，之后再对这个对象进行操作，比如说修改这个弹窗的URL神马的，听上去是不是很费解。先上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$("#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 = url; clearInterval(utime); } else if(num > 20) { w.close(); clearInterval(utime); } unum++; }, 200);}); |
我再来分析一遍：
说到上面已经实现了弹窗的基本步骤了，但是比较麻烦，一般人要求没那么高的话，其实计数器是可以省去的，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$("#first").click(function(){ var w = window.open(); $.ajax({ type: ‘POST‘, url: ‘/deposit/paypoints‘, success: function(re) { w.location = re.url; }, error:function(){ w.close(); } });}); |
说到这里，不知道你是否有了概念了，呃，没有。。。好吧，我再来个简单的例子，有兴趣的朋友慢慢悟哦～
转载自：http://levi.cg.am/archives/3453
标签：
原文地址：http://www.cnblogs.com/wevtimes/p/4290173.html
