JavaScript中使用window.open被拦截解决办法

最近做项目,有个需求是,点击跳转跳转,跳转需要访问后台是否可以跳转

跳转功能呢通过ajax异步请求完成,最开始的想法是在异步获得返回成功后,直接用window.open(URL)打开目的窗口,遇到了新标签页被浏览器拦截的情况;

[javascript]  view plain  copy
  1. $.ajax({  
  2.                 type: 'get',  
  3.                 dataType: 'jsonp',  
  4.                 crossDomain: true,  
  5.                 jsonp: 'xxxxx',  
  6.                 url:'xxxxxxxxxx',  
  7.                 success: function (data) {  
  8.                    //此处悬浮窗弹出  
  9.                    window.open(URL)  
  10.                 }  
  11.             })  
网上的处理方法大致是:

在click事件时开启一个新的空窗口,然后异步请求到信息后将该窗口的location改变,该方法不合适的地方是,浏览器默认会立即跳转到空窗口,弹出悬浮窗在父窗口,无法被用户看到

[javascript]  view plain  copy
  1. BTN.click(function () {  
  2.     var mywin = window.open();  
  3.   
  4.     $.ajax({  
  5.         type: 'get',  
  6.         dataType: 'jsonp',  
  7.         crossDomain: true,  
  8.         jsonp: 'apicb',  
  9.         url:'',  
  10.         success: function (data) {  
  11.     //此处父页面悬浮窗弹出不能被看到  
  12.  mywin.location.href = URL; } })});  

出现被拦截情况的原因主要在于,浏览器不允许,非用户行为的窗口打开方式,所以必须通过点击事件来触发URL打开,所以采取了下面的解决办法:

函数封装:先创建个跳转的a元素,模拟发送click请求后将该元素从文档中删除;

[javascript]  view plain  copy
  1. BTN.click(function () {  
  2.     $.ajax({  
  3.         success: function() {  
  4.             //1展示悬浮窗  
  5.               
  6.             //2打开新窗口  
  7.             setTimeout(function () {  
  8.                 openWin('http://www.baidu.com');  
  9.             },2000);  
  10.                   
  11.         }  
  12.     })  
  13.           
  14. });  
  15.   
  16. function openWin(url) {  
  17.     $('body').append($('<a href="'+url+'" target="_blank" id="openWin"></a>'))  
  18.     document.getElementById("openWin").click();//点击事件  
  19.     $('#openWin').remove();  
  20. }  

本来测试后发现没有问题,发布到服务器后浏览器继续拦截,奔溃边缘。。

只能先用window.open打开一个窗口,然后ajax返回值后修改该窗口地址

var tempwindow=window.open();
tempwindow.location='http://www.baidu.com';

tempwindow.close();


新开页面马上关闭,切换会导致感觉屏幕闪了一下,不过不注意是看不到的


亲测 Google、Firefox、IE可用 (测试时间:2018-03-16)


转载地址:http://blog.csdn.net/u011209223/article/details/77742806

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值