CODEWITHSUNDEEP
javascriptphpjqueryajax
TH1981
TH1981

Reputation: 3193

How to avoid javascript `window.open` triggering popup window alert

I'm trying to build an off-site notification function in jQuery. The script first checks if the link is an external link and then checks against a db table entries for exceptions. If the link is external and not on the list of exceptions, send the visitor to a notification page. If it is an external link that's on the exception list, then open the link in a new window without the notification page.

I'm using a jQuery $.post call to send the link info out to a php script that retrieves the exceptions and returns a yes or no for if it needs to go to the notification screen. Here's the code:

$('a').click(function(){
    var url =$(this).attr('href');

    if(url !== '#'){ 
        // ignore links that don't 'go' anywhere 

        if($(this).hasClass('alerted')){
            // .alerted is used on the notification page to show the user's already been notified & prevents an infinite loop of notifications.
            window.open(url);
            return false;

        }else if(url.substr(0,4) !='http'){
            // check that the url isn't an internal link ('/page.php' for example)
            return true;
        }

        // ajax script to check url is external and is there an exception. Returns as json object:
        // link: link
        // notify: true/false
        $.post("/scripts/form_process.php", { action : 'offsite', link: url}, function(data){
            if(data.notify == true){
                // if visitors should be notified, redirect to the following link:
                window.location= '/leaving-site?link='+encodeURIComponent(data.link);
                return false;
            }else{
                // if the link is in the exception list, don't notify but do open the link in a new window:
                window.open(data.link);
            }

        });
        return false;
    }
});

This is working fine except that so long as the window.open(url) command is inside the $.post success function, the browser is treating it like a popup instead of as a natural link. This seems to be a problem when using window.open inside the ajax call as far as I can tell. When I use it here: 

        if($(this).hasClass('alerted')){
            // .alerted is used on the notification page to show the user's already been notified & prevents an infinite loop of notifications.
            window.open(url);
            return false;
        }

I don't get the pop up blocker.

I can't hard code the exceptions list and I have to check every link - I can't assume a class will be added to the links that need to be notified for example.

How can I open the external link in a new tab and avoid the popup blocker in this code?

Upvotes: 1

Views: 2718

Answers (1)

itamar
itamar

Reputation: 3967

The classic way to solve this is as follows: Create the new window before the AJAX call:

var newWindow = window.open('', '_blank');

And in the success - you assign the URL to the new window like so:

newWindow.location.href = 'http://example.com';

Full example with your code:

$('a').click(function(){

    var url =$(this).attr('href');

    if(url !== '#'){ 
        // ignore links that don't 'go' anywhere 

        if($(this).hasClass('alerted')){
            // .alerted is used on the notification page to show the user's already been notified & prevents an infinite loop of notifications.
            window.location = url;
            return false;

        }else if(url.substr(0,4) !='http'){
            // check that the url isn't an internal link ('/page.php' for example)
            return true;
        }

        // ajax script to check url is external and is there an exception. Returns as json object:
        // link: link
        // notify: true/false
         var newWindow = window.open('', '_blank');
        $.post("/scripts/form_process.php", { action : 'offsite', link: url}, function(data){
            if(data.notify == true){
                // if visitors should be notified, redirect to the following link:
                newWindow.location.href= '/leaving-site?link='+encodeURIComponent(data.link);
                return false;
            }else{
                // if the link is in the exception list, don't notify but do open the link in a new window:
                newWindow.location.href(data.link);
            }

        });
        return false;
    }
});

Upvotes: 4

Related Questions