异步请求后,浏览器屏蔽打开窗口,应该要怎么办
之前做支付中心和页游项目的时候,经常碰到一个这样的需求,比如点击一个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,一旦出发,是要跳转的),所以这种方式还是不行。
难道就没有一种好点的,解决浏览器异步请求里 打开窗口的问题么?
求各位大神拍砖