Question

我有一个包含内部和外部链接的选择选项下拉列表。我希望外部链接（并且只有它们）在新选项卡中打开。这就是我所拥有的。

<select id="my-dropdown">
    <option value="">A list of internal and external links</option>
    <option value="http://www.someurl.com">External Link</option>
    <option value="/internal/page">Internal links</option>
</select>

JS打开链接。

<script>
    document.getElementById("my-dropdown").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }        
    };
</script>

编辑：将JS更改为：

<script>
    document.getElementById("my-dropdown").onchange = function() {

        var externalLinkCheck = this.options[this.selectedIndex].value;

        if (this.selectedIndex!==0 && externalLinkCheck.substring(0,4) == "http") {
            window.open(this.value, '_blank');
        } else {
            window.location.href = this.value;
        }        
    };
</script>

chriserwin下面的回答也很好！谢谢！

Answer 1

您可以添加另一个条件来查找外部链接的http://前缀。

<script>
    document.getElementById("my-dropdown").onchange = function() {
        if (this.selectedIndex!==0) {
            if (this.value.indexOf('http://') == 0) {
                window.open(this.value);
            }
            else {
                window.location.href = this.value;
            }
        }
    };
</script>

然而，大多数浏览器都有一个弹出窗口阻止程序，它将关闭以编程方式打开的新窗口。通常只允许处理onclick事件的代码绕过弹出窗口阻止程序。

Answer 2

你可以这样做：

<script>
   document.getElementById("my-dropdown").onchange = function() {
      if(this.selectedIndex!==0) {
          var win=window.open(this.value, '_blank');
          win.focus();
      }        
   };
</script>

从新选项卡中的选择/选项下拉列表中打开外部链接

2 个答案: