"window.open" blocked chrome with change event
I am trying to open a window based on an onChange event on a select element without being blocked by Chrome's popup blocker.
The problem is shown here.
https://jsfiddle.net/yyfe0824/1/
<select class="dropdown-select" onChange="window.open('https://www.google.com');">
<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.com');" value="click me">
No problem calling window.open on the "click me" button, but if you try to change the select dropdown chrome will block the popup.
So far, the answers to this problem have been specific to the onClick event. Research shows that Chrome blocks popups if it detects that it is not being launched by the user through some kind of handler, so I am specifically trying to call the inline function rather than using another named function.
Is this the intended behavior of window.open, especially for onChange, and if so is there any specific solution? (Apart from changing the structure to be the click event in the first place.)
source to share
This is by design, the only time browsers do not block window.open
when you handle the event click
.
My suggestion is to provide a link that changes when users select from the dropdown.
I do not recommend opening a popup because users do not expect a popup when choosing from a dropdown, so popup blockers usually do not allow this. Even if you find something that works in the browser ( https://jsfiddle.net/yyfe0824/5/ in Firefox) it might break in the future.
source to share
You should be able to work around this by clicking on the posting and simply determine if the new selected item matches the previous selected item.
I 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;
}
}
source to share