时间戳

首页 > 解决方案 > 在选择更改时打开一个新标签 - 仅适用于 Chrome

javascript - 在选择更改时打开一个新标签 - 仅适用于 Chrome

问题描述

我有一个常规select元素：

<div id="standings-listing">
    <select>
        <option value="0">please select</option>
        <option value="1">one</option>
        <option value="2">two</option>
    </select>
</div>

尽管我试图以其他方式说服他们，但我的客户希望网站在每次用户更改元素的值时在新选项卡中打开一个页面。

$('#standings-listing').on('change', 'select', function(){
        if($(this).val() > 0)
            $('<a href="/league/standings/'+$(this).val()+'" target="blank"></a>')[0].click();
    });

上面这段骇人听闻的代码在 Chrome 中有效，但在 Firefox 中无效，而且显然它在大多数手机浏览器上也无效。大惊喜。

无论如何，我已经确认事件本身会触发，所以打开新标签就是问题所在。例如，这在所有浏览器中都是一样的：

$('#standings-listing').on('change', 'select', function(){
        console.log('My boss wants me to hack the internet');
    });

有没有办法让这项工作跨浏览器，或者我应该回到试图说服他们根本不要尝试这个？

编辑：当我使用 window.open(url, '_blank') 而不是创建链接时，我得到了这个：

在此处输入图像描述

标签： javascriptjquery

解决方案

这似乎是window.open.¹ 的一个用例，但它不能始终如一地跨浏览器工作的原因有两个：

  1. 在某些浏览器（例如 Firefox）上，链接必须在文档中才能以编程方式单击它才能工作。例如，如果您将代码更改为：

    $('#standings-listing').on('change', 'select', function(){
    if($(this).val() > 0) {
        var link = $('<a href="/league/standings/'+$(this).val()+'" target="blank"></a>');
        link.appendTo(document.body);
        link[0].click();
        link.remove();
    }
});

    ...它在 Firefox 上工作（“工作”我的意思是它触发 Firefox 的弹出窗口阻止程序；然后用户可以选择允许弹出窗口，仅一次或从那时起）。

  2. 如果您每次都想要一个新窗口，则目标应该是_blank，而不是blank。后者是一个将被重用的命名目标。前者是表示“新的空白窗口”的特殊标志。

希望弹出窗口阻止程序参与的事实将阻止客户。

¹您已更新问题以说明您使用此功能的原因，而不是window.open触发window.open弹出窗口阻止程序的原因。因此，您现在可以切换到使用window.open，因为您知道它会以任何一种方式触发。:-)

推荐阅读