Как мне открыть ссылку в новом окне?

94

У меня есть обработчик кликов для конкретной ссылки, внутри которого я хочу сделать что-то похожее на следующее:

window.location = url

Мне это нужно, чтобы открыть URL-адрес в новом окне, как мне это сделать?

Крис
источник

Ответы:

204

Вам может понравиться:

window.open('url', 'window name', 'window settings')

jQuery:

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

Кроме того, можно установить targetна _blankсамом деле.

Сарфраз
источник
но этот код jquery не будет автоматически переходить к цели
Амр Элгархи,
26
_blank является целью по умолчанию, поэтому использования window.open (url) должно быть достаточно
themerlinproject
Не уверен, что поможет и не совсем такая же проблема, но я искал такое же решение для загрузки файла (не по ссылке, а по кнопке), а в Chrome окно не открывалось и загрузка не производилась, пока я просто не перейду на window.location = 'url', который не меняет местоположение, но загружает файл ...
gdoumenc
window.open (url) в порядке :)
fudu
33

Вот как заставить цель внутри обработчика кликов:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});
Chadwackerman
источник
5
Нет необходимости использовать селектор jQuery в обработчике кликов, поэтому строка $(this).attr('target', '_blank'); может быть изменена на this.target = "_blank";Кроме того, если ссылки привязки на странице могут быть изменены, чтобы иметь rel="external"атрибуты, тогда вы можете создать глобальный обработчик кликов для страницы с помощью селектора jQuery a[rel="external"]вместо того, чтобы иметь обработчик кликов по выбранной ссылкеa#link_id
himanshu
17

вам нужно будет использовать window.open(url);

ссылки:
http://www.htmlcodetutorial.com/linking/linking_famsupp_120.html
http://www.w3schools.com/jsref/met_win_open.asp

Амр Элгархи
источник
5
Ой! Не используйте и не ссылайтесь на w3schools, это НЕ связано с W3C. Вместо этого используйте MDN: developer.mozilla.org/en-US/docs/Web/API/Window.open
А.Б. Кэрролл,
5
w3schools - это хорошо (не обращайте внимания на «несколько» троллей w3c) ... будет продолжать оставаться авторитетным источником ... даже w3c теперь снова поддерживает его ;-)
Давеси
4

Вы также можете использовать для этого метод jquery prop ().

$(function(){
  $('yourselector').prop('target', '_blank');
}); 
Уша
источник
2

Я только что нашел интересное решение этой проблемы. Я создавал промежутки, содержащие информацию, основанную на возврате от веб-службы. Я подумал о том, чтобы попытаться разместить ссылку вокруг диапазона, чтобы, если я щелкну по ней, «а» фиксирует щелчок.

Но я пытался захватить щелчок с помощью диапазона ... поэтому я подумал, почему бы не сделать это, когда я создал диапазон.

var span = $('<span id="something" data-href="'+url+'" />');

Затем я привязал обработчик кликов к диапазону, который создал ссылку на основе атрибута data-href:

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

Это успешно позволило мне щелкнуть диапазон и открыть новое окно с правильным URL-адресом.

Драмот
источник
1

Что не так <a href="myurl.html" target="_blank">My Link</a>? Не нужен Javascript ...

Michaja Broertjes
источник
1

это решение также учитывало случай, когда url пуст и отключал (серый цвет) пустую ссылку.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>

Скотт 混合 理论
источник
0

Имейте в виду, если вы хотите выполнять запросы AJAX внутри функции обработчика событий для события щелчка. По какой-то причине Chrome (и, возможно, другие браузеры) не открывает новую вкладку / окно.

user2618825
источник
0

Это не очень хорошее исправление, но оно работает:

CSS:

.new-tab-opener
{
    display: none;
}

HTML:

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

Javascript:

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

Живой пример: http://jsfiddle.net/7eRLb/

Адриандорин
источник
0

Microsoft IE не поддерживает имя в качестве второго аргумента.

window.open('url', 'window name', 'window settings');

Проблема в том window name. Это будет работать:

window.open('url', '', 'window settings')

Microsoft допускает только следующие аргументы, если они вообще используются:

  • _blank
  • _СМИ
  • _parent
  • _поиск
  • _self
  • _верхняя

Посетите этот сайт Microsoft

Дханеш старший
источник
4
-1: несмотря на нарушение лицензии копирование / вставка из stackoverflow.com/a/1462500/560648 , это неправда. Аргумент будет поддерживаться . Он просто не может содержать пробелов, тире или других знаков препинания. Прочтите другие ответы и комментарии по этому вопросу.
Гонки легкости на орбите