Open link in a new tab without target or window.open

Question

I have a function that does a redirect:

vm.pagarUpload = function() {
    $http({
        method: 'POST',
        url: API.url + 'app/service.php?t=pagarUpload',
        data: {
            nome: vm.nomeUpload,
            email: vm.emailUpload,
            cpf: vm.cpfUpload
        }
    }).then(function successCallback(response) {
        console.log('redirecionando...');
        window.location.href = "https://minhaurl.com/payment.html?code=" + response.data;
    });
}

But I need that instead of directing to another page open in another tab, I can not use the direct target in the tag <a> because I need the answer of the POST. I also can not use the window.open('http://url...','_blank') as it is detected as pop-up and is blocked. I wonder if there is any other way to do this?

Answer 1

With window.location will not be possible because it references only the same page. You can create a dynamic link in the return of ajax with target=_blank and click on it:

vm.pagarUpload = function() {
    $http({
        method: 'POST',
        url: API.url + 'app/service.php?t=pagarUpload',
        data: {
            nome: vm.nomeUpload,
            email: vm.emailUpload,
            cpf: vm.cpfUpload
        }
    }).then(function successCallback(response) {
        var link = document.createElement('a');
        link.href = "https://minhaurl.com/payment.html?code="+response.data;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        delete link;
    });
}

Answer 2

You can do it using window.open even with a variable, and after the return of Ajax, redirect the contents of the open tab/window. This prevents the browser from blocking the popup.

In the link you insert the window.open with a variable:

<a href="#" onclick="janela = window.open()">Abre nova aba/janela</a>

In Ajax you redirect the URL of janela:

janela.location.href = "https://minhaurl.com/payment.html?code=" + response.data;

Code:

vm.pagarUpload = function() {
    $http({
        method: 'POST',
        url: API.url + 'app/service.php?t=pagarUpload',
        data: {
            nome: vm.nomeUpload,
            email: vm.emailUpload,
            cpf: vm.cpfUpload
        }
    }).then(function successCallback(response) {
        console.log('redirecionando...');
        janela.location.href = "https://minhaurl.com/payment.html?code=" + response.data;
    });
}

EDIT

You can create a page .html standard with the text "Opening..." or "Redirecting..." in the popup before the return of Ajax, to warn the user that the page is being processed:

<a href="#" onclick="janela = window.open('aguarde.html')">Abre nova aba/janela</a>