Open new window after a click event not working in Safari, Chrome

javascript cross-browser window.open
matthewpavkov picture matthewpavkov · Jan 12, 2011 · Viewed 26.6k times · Source

I'm trying to open a new window like so:

$('#wrapper').click(function() {
    window.setTimeout(function() {
        //alert('hi');
        window.open("http://example.com", "ExternalLinks", "resizable=yes, scrollbars=yes, status=yes");
    }, 1000);
});

This works in Firefox, but not in Chrome or Safari (so far, I've just tested on a Mac). The alert() works in all browsers, so there seems to be something preventing the window.open from executing in Safari/Chrome. Furthermore, if I remove the setTimeout and just call the window.open then it does work in all 3 browsers. It's almost like if the window.open is nested too far away from the click event, then it doesn't work in Safari/Chrome.

So you know, I have an all-Flash website and I'm trying to get external links to open in a new window, so I'm reading the hash tag in the URL (ex. htp://example.com/#/facebook/) and if it matches certain items, then I'm calling window.open to open a specific URL. I don't have access to the Flash source, or I would handle this there.

Any ideas?

Answer

Ben Lee picture Ben Lee · Jan 12, 2011

Safari/Chrome have built-in pop-up blockers that stop this from working. The only javascript that is allowed to open a new window in Safari/Chrome is javascript directly attached to click handlers (and other direct user input handlers). In past versions people figured out some ways to cheat (like generating some other element -- a form or div -- and simulating user input with javascript), but newer versions are smarter about detecting this. I'd recommend re-configuring things so that you don't use a delayed pop-up -- that is the kind of thing that can generally be jarring to a user after all.

Related questions

Get the size of the screen, current web page and browser window

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY which will work in all major browsers?

Read More
OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

I'm looking for a generalized solution for this. Consider 2 radio type inputs with the same name. When submitted, the one that is checked determines the value that gets sent with the form: <input type="radio" name="myRadios" onchange="handleChange1();" …

Read More
How to get the browser viewport dimensions?

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size? Or better yet, the viewport size of the browser with JavaScript? See green area here:

Read More