'window.open'已被Chrome更改事件阻止

Question

我試圖在select元素上打開一個基於onChange事件的窗口，而不會被Chrome的彈出窗口阻止程序阻止。

這里證明了這個問題。

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

window.open調用“單擊我”按鈕沒有問題，但如果您嘗試更改選擇下拉列表，則chrome將阻止彈出窗口。

到目前為止，這個問題的答案已經特定於onClick事件。 做研究表明，如果Chrome檢測到它不是通過某種處理程序觸發的用戶，那么Chrome會阻止彈出窗口，因此我特意嘗試內聯調用該函數，而不是使用其他命名函數。

這是window.open的預期行為，特別是onChange，如果有的話，是否有任何特定的解決方法？ （除了首先將結構更改為點擊事件。）

Answer 1

這是設計，瀏覽器唯一沒有阻止window.open是你處理click事件。

我的建議是提供一個鏈接，當用戶從下拉列表中選擇時，該鏈接會發生變化。

我建議不要打開彈出窗口，因為當你從下拉列表中選擇時，用戶不希望彈出窗口，這就是彈出窗口阻止程序通常不允許這樣做的原因。 即使您在瀏覽器中找到可以使用的內容（在Firefox中為https://jsfiddle.net/yyfe0824/5/ ），它也可能在將來中斷。

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