I am trying to open a window based on an onChange event on a select element without getting blocked by Chrome's popup blocker.

The problem is demonstrated here.

/

<select class="dropdown-select" onChange="window.open('');">
    <option value="uno">Uno</option>
    <option value="dos">Dos</option>
    <option value="tres">Tres</option>
</select>

<input type="button" onClick="window.open('');" value="click me">

There is no problem with a window.open call on the 'click me' button, but if you try to change the select dropdown, chrome will block the popup.

So far, answers to this problem have been specific to the onClick event. Doing research reveals that Chrome will block popups if it detects that it is not user triggered via some sort of handler, so I'm specifically trying to call the function inline, rather than using another named function.

Is this the intended behavior of window.open, specifically for onChange and if so, is there any particular workaround? (Aside from changing the structure to be a click event in the first place.)

I am trying to open a window based on an onChange event on a select element without getting blocked by Chrome's popup blocker.

The problem is demonstrated here.

https://jsfiddle/yyfe0824/1/

<select class="dropdown-select" onChange="window.open('https://www.google.');">
    <option value="uno">Uno</option>
    <option value="dos">Dos</option>
    <option value="tres">Tres</option>
</select>

<input type="button" onClick="window.open('https://www.google.');" value="click me">

There is no problem with a window.open call on the 'click me' button, but if you try to change the select dropdown, chrome will block the popup.

So far, answers to this problem have been specific to the onClick event. Doing research reveals that Chrome will block popups if it detects that it is not user triggered via some sort of handler, so I'm specifically trying to call the function inline, rather than using another named function.

Is this the intended behavior of window.open, specifically for onChange and if so, is there any particular workaround? (Aside from changing the structure to be a click event in the first place.)

• javascript
• html
• google-chrome
• onchange

• 1 It does not matter if you use window.open inline or in a named function. The browser will check if the call stack has its origin in an user interaction and if it is an interaction that allows to open a popup the window.open would not be blocked. – t.niese Commented May 26, 2015 at 18:34
• 1 @JuanMendes I know that it is an user interaction. I just wanted to say that it does not matter where open is called (inline vs in some function), but that the origin/root for the call-stack needs to be an user-interaction that allows window.open – t.niese Commented May 26, 2015 at 18:38
• 1 @CliffBurton if your solutions works but not the one with onchange then you should considere it as browser bug and not as a reliable solution. – t.niese Commented May 26, 2015 at 18:44
• 1 @JuanMendes onchange="$('#buttonID').click();" either does not create a real event at all because jquery has its own internal event handling or it creates a user initiated event, as of that a click event created that way should not allow window.open to work, otherwise you could open as many windows as you would like to. So if onchange="$('#buttonID').click();" would allow to call a window.open but not a direct onchange="window.open(...)" then it is more a browser bug then a solution. – t.niese Commented May 26, 2015 at 19:09
• 1 @JuanMendes and how does your statement differ to what I have said. CliffBurton claimed that onchange="$('#buttonID').click();" works for him. But if onchange="$('#buttonID').click();" somehow calls the onClick="window.open('https://www.google.');" of the button and this really opens a window but onChange="window.open('https://www.google.');" does not, it is a bug that the window.open opens a window in that case – t.niese Commented May 26, 2015 at 19:18

2 Answers 2

That is by design, the only time browsers don't block window.open is when you are handling a click event.

My suggestion is to provide a link that changes when users select from the dropdown.

I advise against opening a popup because users don't expect a popup when you select from a drop down, that is why popup blockers don't typically allow this. Even if you find something that works in a browser (https://jsfiddle/yyfe0824/5/ in Firefox), it could break in the future.

You should be able to work around this by having click wired up and simply determine if the new selected item matches the previous selected item.

I've edited the previous JSFiddle to make it work.

dropdown.addEventListener('click', Foo);    
function Foo(e)
{
    var selectedIndex = dropdown.selectedIndex;
    if(selectedIndex !== oldSelectedIndex)
    {
        var val = dropdown.options[selectedIndex].value;
        var opened = window.open(val);
        oldSelectedIndex = selectedIndex;
    }
}