Fork me on GitHub
异步请求后,浏览器屏蔽打开窗口

异步请求后,浏览器屏蔽打开窗口,应该要怎么办

      之前做支付中心和页游项目的时候,经常碰到一个这样的需求,比如点击一个a标签,产生了一个ajax请求,返回一个url给我,我拿着这个url打开新页面。需求是这样的,看起来按部就班很容易搞定,但是,发现好多浏览器下根本不能新打开窗口(标签)(至少在第一次打开的时候会这样,浏览器屏蔽了,然后说 刚屏蔽了一个打开窗口),因为被浏览器拦截了。百思不得其解,最后只好和产品说明白技术无法实现,改需求:第一次请求后,页面弹出一个温馨提示BOX,用户点击这个BOX上的按钮,我打开上回返回给我的URL。(如果有大神知道此解决方案,欢迎讨论,多多感谢)。

      后面做页游的时候,看到一同事,写到这样的一段代码,说可以屏蔽浏览器拦截:

复制代码
 1 /**
 2 * 模拟window.open,防止window.open被浏览器拦截。无法解决异步情况(所有浏览器)下的拦截
 3 * 使用实例:
 4 *    $.windowopen('http://niu.xunlei.com/', '_blank');
 5 */
 6 (function($){
 7     $.extend({"windowopen": function(url, target){
 8         var a = document.createElement("a");
 9         a.setAttribute("href", url);
10         if(target == null){
11             target = '';
12         }
13         a.setAttribute("target", target);
14         //a.setAttribute("id", "windowopen_" + (new Date()).getTime() + Math.ceil((Math.random()*100000)));
15         document.body.appendChild(a);
16         if(a.click){
17             a.click();
18         }else{
19             try{
20                 var evt = document.createEvent('Event');
21                 evt.initEvent('click', true, true);
22                 a.dispatchEvent(evt);
23             }catch(e){
24                 window.open(url);
25             }
26         }
27         document.body.removeChild(a);
28     }});
29 })(jQuery);
复制代码

仔细分析了同事的代码后,我觉得存在几个问题:

       1.应该首先尝试window.open打开方式,而不是把这个放到最后。(如果没有成功打开,window.open会有返回值,根据此值可以判断)

       2.DOM方式创建一个a标签,然后去aDom.click()方式证明和window.open()一样的效果,放在这里属于多余。

       3.自定义事件。通过度娘把我带到了https://developer.mozilla.org/en-US/docs/DOM/document.createEvent#Notes,完整使用例子可以见这个https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events。自定义事件是指,在DOM2 级下,定义各种自定义事件,和浏览器本身所支持的事件没有关系,上面代码片段中定义了一个自定义事件,但是当出发自定义事件的click时候,和浏览器本身支持的click有区别(浏览器本身支持的click,一旦出发,是要跳转的),所以这种方式还是不行。

        难道就没有一种好点的,解决浏览器异步请求里 打开窗口的问题么?

       求各位大神拍砖

posted on 2013-04-02 23:05  HackerVirus  阅读(328)  评论(0编辑  收藏  举报