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

      之前做支付中心和页游项目的时候，经常碰到一个这样的需求，比如点击一个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 15:20  zuiaitianxibi  阅读(1881)  评论(22)  编辑  收藏  举报

导航