Opening new windows in Chrome after an AJAX request behaves like a pop-up

Question

Opening new windows in Chrome after an AJAX request behaves like a pop-up

When a user clicks a button in my application, an ajax request is triggered. Following the success of this request, I generate a URL which I intend to open in a new tab. Unfortunately, when using Chrome and calling window.open within the success handler, the URL opens as a popup and gets blocked by popup blockers. It seems that Chrome may be mistakenly categorizing the asynchronous success code as not directly caused by the initial click event. Is there any way to address this issue without switching to synchronous ajax requests?

UPDATE Below is a snippet of code illustrating this problem:

$('#myButton').click(function() {
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {'json': JSON.stringify({
            url:'http://google.com'})},
        success: function(data) {
            window.open(data.url,'_blank');
        }
    });
});

http://jsfiddle.net/ESMUA/2/

It is worth noting that my main concern is the URL opening in a separate window rather than a tab, rather than its blockage by popup blockers.

javascript ajax google-chrome

Answer 1

Answer №1

Consider adding the following code snippet to your project:

window.open(url,'_blank');

Tweak

It seems that bypassing popup-blockers for pages not directly triggered by a user action is challenging.

However, you can try this workaround to mimic a user action and hopefully avoid the popup-blocker:

var $a = $('<a>', {
        href: url,
        target: '_blank' 
    });

$(document.body).append($a);
$a.click();

Modification 2

In such cases, it might be better to maintain synchronous behavior.

If the new window shares the same origin, you do have some control over it using JavaScript.

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');

    setTimeout(function(){ // asynchronous
        wi.location.href = 'http://google.com';
    }, 500);
});

Answer 2

Consider adding the following code snippet to your project:

window.open(url,'_blank');

Tweak

It seems that bypassing popup-blockers for pages not directly triggered by a user action is challenging.

However, you can try this workaround to mimic a user action and hopefully avoid the popup-blocker:

var $a = $('<a>', {
        href: url,
        target: '_blank' 
    });

$(document.body).append($a);
$a.click();

Modification 2

In such cases, it might be better to maintain synchronous behavior.

If the new window shares the same origin, you do have some control over it using JavaScript.

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');

    setTimeout(function(){ // asynchronous
        wi.location.href = 'http://google.com';
    }, 500);
});

Answer 3

Answer №2

Have you tried including async: false in your code? Give it a shot!

$('#myButton').click(function() {
$.ajax({
    type: 'POST',
    async: false,
    url: '/fetch/data/',
    data: {'json': JSON.stringify({
        endpoint:'http://example.com'})},
    success: function(response) {
        window.open(response.endpoint,'_blank');
    }
});
});

Answer 4

Have you tried including async: false in your code? Give it a shot!

$('#myButton').click(function() {
$.ajax({
    type: 'POST',
    async: false,
    url: '/fetch/data/',
    data: {'json': JSON.stringify({
        endpoint:'http://example.com'})},
    success: function(response) {
        window.open(response.endpoint,'_blank');
    }
});
});

Answer 5

Answer №3

The technique that proved effective for me was:

const newTab = window.open('about:blank', '_blank');

myService.sendData('endpoint', requestPayload)
.then(function(response) {
    newTab.location.href = 'http://destinationwebsite.com/directory/page';
});

By opening the new tab prior to the synchronous call, capturing the reference to the window, and subsequently redirecting it upon receiving the asynchronous data via the promise.

Answer 6

The technique that proved effective for me was:

const newTab = window.open('about:blank', '_blank');

myService.sendData('endpoint', requestPayload)
.then(function(response) {
    newTab.location.href = 'http://destinationwebsite.com/directory/page';
});

By opening the new tab prior to the synchronous call, capturing the reference to the window, and subsequently redirecting it upon receiving the asynchronous data via the promise.

Answer 7

Answer №4

Above, @pstenstrm shared a solution that almost worked for me, but I found an opportunity to enhance it with just one line of code. My ajax call was causing a delay of more than a second, resulting in a user-facing blank page issue. Thankfully, there is a straightforward way to inject HTML content into the new window we create.

For example:

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');
    $(wi.document.body).html("<p>Please wait while you are being redirected...</p>");

    setTimeout(function(){ // async
        wi.location.href = 'http://google.com';
    }, 500);
});

This script populates the new tab with the message "Please wait while you are being redirected..." instead of displaying a blank page for a brief moment. I wanted to share this as a comment, but my reputation isn't high enough for commenting at the moment.

Answer 8

Above, @pstenstrm shared a solution that almost worked for me, but I found an opportunity to enhance it with just one line of code. My ajax call was causing a delay of more than a second, resulting in a user-facing blank page issue. Thankfully, there is a straightforward way to inject HTML content into the new window we create.

For example:

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');
    $(wi.document.body).html("<p>Please wait while you are being redirected...</p>");

    setTimeout(function(){ // async
        wi.location.href = 'http://google.com';
    }, 500);
});

This script populates the new tab with the message "Please wait while you are being redirected..." instead of displaying a blank page for a brief moment. I wanted to share this as a comment, but my reputation isn't high enough for commenting at the moment.

Answer 9

Answer №5

There is no foolproof method to determine if a pop-up window has been blocked by a browser's pop-up blocker. In Firefox and Internet Explorer 6 SP2, using the window.open function may return null if the tab or window was blocked.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#FAQ

If you want to know if your pop-up window was blocked by a pop-up blocker, you can check the return value of window.open(). In browsers like Mozilla/Firefox and Internet Explorer 6 SP2, it will be null if the window was not allowed to open. However, with most other pop-up blockers, there is no definitive way to determine this.

Answer 10

There is no foolproof method to determine if a pop-up window has been blocked by a browser's pop-up blocker. In Firefox and Internet Explorer 6 SP2, using the window.open function may return null if the tab or window was blocked.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#FAQ

If you want to know if your pop-up window was blocked by a pop-up blocker, you can check the return value of window.open(). In browsers like Mozilla/Firefox and Internet Explorer 6 SP2, it will be null if the window was not allowed to open. However, with most other pop-up blockers, there is no definitive way to determine this.

Opening new windows in Chrome after an AJAX request behaves like a pop-up

Answer №1

Tweak

Modification 2

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Assign an event listener to a collection of elements

Enhancing Label and Input Elements with Dynamic CSS through jQuery Values

Writing in Node.js involves setting up a local DynamoDB for local development rather than running it in an actual Lambda

What is the best way to conceal the outline in a popup window?

Guide on sending JSON object to Angular custom components

Displaying content in a hidden div on click event

Dealing with a 500 Error in Laravel 5 when using AJAX for POST requests

Encountered a problem when attempting to upload files to AWS S3 using React and React AWS S3

Alter the command from 'require' to an 'import'

Tool to stop automatic logouts on websites

Creating a custom event handler for form input changes using React hooks

Difficulty altering value in dropdown using onChange function - Material-UI Select in React app

Enhance scrolling with a bounce effect

Obtain the total number of result entries

The Angular modal service is failing to show up on the screen

Issue with VueJS instance: Unable to prevent default behavior of an event

What could be causing React Router to fail in navigating to a nested route?

Safari Browser does not currently offer support for MediaRecorder functionality

What is preventing my video from filling the entire screen?

Executing several API endpoint requests using an array in Node.js