Як я можу відкрити посилання в новому вікні?


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 не буде автоматично переходити до цілі
Amr Elgarhy

26
_blank є цільовим значенням за замовчуванням, тому достатньо використання window.open (url)
themerlinproject

Не впевнений, допоможе і не зовсім те саме питання, але я шукав те саме рішення для завантаження файлу (не за посиланням, а за допомогою кнопки), і в Chrome вікно не відкривалось і не завантажувалось, поки я просто не перейду на window.location = 'url', який не змінює місце розташування, але завантажує файл ...
gdoumenc

window.open (url) нормально :)
фуду

33

Ось як примусити ціль всередині обробника клацання:

$('a#link_id').click(function() {
    $(this).attr('target', '_blank');
});

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

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
AB Carroll

5
w3schools - це добре (ігноруйте "декількох" тролів w3c) ... і надалі залишатиметься авторитетним джерелом ... навіть w3c тепер підтримує його знову ;-)
Dawesi

4

Ви також можете використовувати для цього метод jquery prop ().

$(function(){
  $('yourselector').prop('target', '_blank');
}); 

2

Я просто знайшов цікаве рішення цього питання. Я створював інтервали, які містять інформацію на основі повернення від веб-служби. Я думав про спробу встановити посилання навколо проміжку, щоб, якщо я натиснув на нього, "a" зафіксував клацання.

Але я намагався зафіксувати клацання з інтервалом ... тому я подумав, чому б не зробити цього, коли створював інтервал.

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

це рішення також розглядало випадок, коли 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 (і, можливо, інші браузери) не відкриє нову вкладку / вікно.


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')

Корпорація Майкрософт допускає лише такі аргументи, якщо взагалі використовувати цей аргумент:

  • _порожня
  • _media
  • _поглядний
  • _search
  • _ себе
  • _top

Перевірте цей веб-сайт корпорації Майкрософт


4
-1: Незважаючи на це, ваша копія / вставка, порушена з stackoverflow.com/a/1462500/560648 , не відповідає дійсності. Аргумент буде підтримуватися . Він просто не може містити пробіли, тире чи інші розділові знаки. Прочитайте інші відповіді та коментарі з цього питання.
Гонки легкості на орбіті
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.