Bypass popup blocker when clicking image to open a new window using jquery

Question

I need some help with the following code to bypass popup blockers when opening the new window. Basically this code transformY rotates an image on click and then after a delay opens a web page. It works fine, but popup blockers block it. I know there is a way to make it bypass that, but I'm still learning and don't know what I'm doing.

Current jQuery:

$(function rotate1(){
    $("#rotate1").click(function() {
    $("#rotate1").toggleClass("spinEffect");
    setTimeout(function() {
        window.open("http://google.com"); }, 1700); });
});

The html is:

<div id="rotate1"><img src="Placeholder.jpg" alt="Project 1"></div>

The css is:

.spinEffect{
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transition: 1.5s;
}

You cannot bypass a popup blocker. But you can show some `
` or other element on top of the rest of your document by setting it to `position: fixed` — , Jul 01 '17 at 08:41
It won't work due to security issues. Check this thread: https://stackoverflow.com/questions/22007592/chrome-window-open-after-ajax-request-acts-like-popup — admn16, Jul 01 '17 at 09:03

score 0 · Answer 1 · answered Jul 01 '17 at 08:50

A browser will only open a tab/popup without the popup blocker warning if the command to open the tab/popup comes from a trusted event. That means the user has to actively click somewhere to open a popup. In your case you have the trusted event(click) but you lose the event context by calling the function setTimeout().There is a way to trick browser. Instead of using setTimeout, you can create a simple while loop which will do the delay,

$(function rotate1(){
$("#rotate1").click(function() {
$("#rotate1").toggleClass("spinEffect");
var date1 = new Date(),
            date2 = new Date(),
            timer = 500; //Milliseconds

        while (date2.valueOf() < date1.valueOf() + timer) {
            date2 = new Date();
        }

    window.open("http://google.com", '_blank');
});

When doing the above, it will open the page, but too quickly. If I change the milliseconds to say 1000, there is a 1 sec delay, the animation goes off, and no pages open. Is there a way to tweak it so the animation goes off as soon as you click then the page opens after animation is done (around 1700)? — Jason C., Jul 01 '17 at 20:16

score 0 · Answer 2 · answered Jul 02 '17 at 04:46

Try this then,

$(function rotate1(){
    $("#rotate1").click(function() {
    $("#rotate1").toggleClass("spinEffect");
    $("#rotate1").addEventListener("animationend",function() {
        window.open("http://google.com");
    }); //standard syntax
    $("#rotate1").addEventListener("webkitAnimationEnd",function() {
        window.open("http://google.com");
    }); // for Chrome and Safari
});

The animationend event occurs when a CSS animation has completed.

Bypass popup blocker when clicking image to open a new window using jquery

2 Answers2