'window.open' 被 Chrome 阻止并发生更改事件

Question

我正在尝试根据 select 元素上的 onChange 事件打开 window，而不会被 Chrome 的弹出窗口阻止程序阻止。

这里演示了问题。

<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">

window.open 调用 'click me' 按钮没有问题，但如果您尝试更改 select 下拉菜单，chrome 将阻止弹出窗口。

到目前为止，这个问题的答案都是针对 onClick 事件的。研究表明，如果 Chrome 检测到它不是用户通过某种处理程序触发的，它将阻止弹出窗口，因此我专门尝试调用内联函数，而不是使用另一个命名函数。

这是 window.open 的预期行为吗，特别针对 onChange，如果是，是否有任何特定的解决方法？（除了首先将结构更改为点击事件。）

Answer 1

这是设计使然，浏览器唯一不阻止 window.open 的时间是在您处理 click 事件时。

我的建议是提供一个 link，当用户 select 从下拉列表中更改时。

我建议不要打开弹出窗口，因为当您从下拉菜单中 select 时，用户不会期望弹出窗口，这就是弹出窗口阻止程序通常不允许这样做的原因。即使您发现某些东西可以在浏览器中运行（https://jsfiddle.net/yyfe0824/5/ 在 Firefox 中），它在未来也可能会崩溃。

Answer 2

您应该能够解决这个问题，方法是将点击连接起来并简单地确定新选择的项目是否与之前选择的项目匹配。

我已经编辑了之前的 JSFiddle 以使其生效。

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;
    }
}

'window.open' 被 Chrome 阻止并发生更改事件

'window.open' blocked by Chrome with change event

html

javascript

google-chrome

onchange