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

最近做项目,有个需求是,点击签到,签到成功后,弹出悬浮窗,待其消失后跳转到新窗口。

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

$.ajax({
                type: 'get',
                dataType: 'jsonp',
                crossDomain: true,
                jsonp: 'xxxxx',
                url:'xxxxxxxxxx',
                success: function (data) {
                   //此处悬浮窗弹出
                   window.open(URL)
                }
            })



网上的处理方法大致是:

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

BTN.click(function () {
    var mywin = window.open();

    $.ajax({
        type: 'get',
        dataType: 'jsonp',
        crossDomain: true,
        jsonp: 'apicb',
        url:'',
        success: function (data) {
	//此处父页面悬浮窗弹出不能被看到
 mywin.location.href = URL; } })});

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

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

BTN.click(function () {
    $.ajax({
        success: function() {
            //1展示悬浮窗
            
            //2打开新窗口
            setTimeout(function () {
                openWin('http://www.baidu.com');
            },2000);
                
        }
    })
        
});

function openWin(url) {
    $('body').append($(''))
    document.getElementById("openWin").click();//点击事件
    $('#openWin').remove();
}
到此该功能点完成!开心!

你可能感兴趣的:(javascript)