Открытие внешних ссылок из выпадающего списка select/option в новой вкладке

У меня есть выпадающий список выбора со ссылками, как внутренние, так и внешние. Я хочу, чтобы внешние ссылки (и только они) открывались в новой вкладке. Это то, что у меня есть.

<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 ниже тоже хорош! Спасибо!

2 ответа

Решение

Вы можете добавить еще одно условие, которое ищет 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, разрешается обходить блокировщик всплывающих окон.

Вы можете сделать так:

<script>
   document.getElementById("my-dropdown").onchange = function() {
      if(this.selectedIndex!==0) {
          var win=window.open(this.value, '_blank');
          win.focus();
      }        
   };
</script>
Другие вопросы по тегам