0

Как открыть все ссылки в блоке #blok_1 и #blok_3 в новой вкладке на js, так чтобы не добавлять никакой код в сами ссылки ?

#blok_1,
#blok_2,
#blok_3 {
  height: 30px;
  width: 200px;
  padding: 6px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin-top: 8px;
  margin-left: 8px;
  border: 1px solid #fff;
  background-color: #FDF5D9;
}
a {
  color: #0D6AF3;
  font: bold 14px Arial, Helvetica;
  text-decoration: none;
}
a:hover {
  color: #F00;
}
<div id="blok_1">
  <a href="http://www.php.su/">открыть в новом окне</a>
</div>


<div id="blok_2">
  <a href="http://www.php.su/">открыть в текущем окне</a>
</div>


<div id="blok_3">
  <a href="http://www.php.su/">открыть в новом окне</a>
</div>

2 ответа 2

4

Для этих целей существуют события и функция window.open(). Событие соответственно на click. Функция window.open(url, target, params) принимает два параметра, урл новой страницы и 'target', это имя новой страницы, обычно для окрытия новой вкладки используют _blank и параметры для новой вкладки, их значения можно посмотреть на MDN.

Можно сделать это двумя способами.

Первый - создать функцию, принимающую объект DOM, в котором надо переходить по ссылкам в новом окне, придется вызвать эту функцию для каждого блока, в котором должно быть такое поведение:

function inNewWindow(block) {
    block.on('click', 'a:not([href^="#"])', function(evt) {
        evt.preventDefault();
        window.open(evt.target.href, '_blank');
    })
} 
  1. создаем обработчик события на саму обертку (в нашем случае это будут #blok_1 и #blok_3). На случай, если ссылки могут появиться внутри блока динамически. Можно повесить событие непосредственно на ссылки, дело от этого не изменится;
  2. фильтровать будет только ссылки по их селектору: a:not([href^="#"]) или a[href^="http://"] и a[href^="https://"]; хочется же, чтобы переход был именно по ссылке, а не по якорю.
  3. в обработчике остановим обработку события по-умолчанию, чтобы переход внутри страницы не был совершен (надо смотреть, чтобы это не повредило общей логики работы сайта) и совершим переход с помощью window.open();
  4. соответственно работать с этой функцией так: inNewWindow(document.getElementById('blok_1')).

Второй немного лучше, но придется дописать атрибут к элементам.

  1. допишем к элементам, по которым должен быть переход на новую страницу, пучстой data-атрибут, например, data-newwindow;
  2. выберем все элементы с таким атрибутом и повесим на них такой же обработчик, как и в первом варианте.
  3. тогда придется всего лишь дописать вот это с скрипт:

 

$('[data-newwindow]').on('click', function(evt) {
    evt.preventDefault();
    window.open(evt.target.href, '_blank');
});
1

Поставить слушатели на событие click на все интересующие нас элементы, затем смотрим что написано в аттрибуте href, и открываем новое окно методом window.open. JQuery:

$('div a').on('click', function() {
    var href = $(this).attr('href');
    window.open(href, '_blank').focus();
});
9
  • Можно добавить event.preventDefault(); для отмены каких-либо других действий по событию.
    – Fenex
    27 сен 2015 в 2:34
  • Ссылка открывается в новой вкладке, но и страница на которой находятся ссылки, также переходит по новому адресу.
    – user185447
    27 сен 2015 в 12:23
  • @Muson для учёта этого я и написал комментарий
    – Fenex
    27 сен 2015 в 12:28
  • Как сделать чтобы ссылки открывались в новом окне, только в блоках с id #blok_1, #blok_3
    – user185447
    27 сен 2015 в 12:50
  • @Muson, сделать соответствующую выборку элементов: $('#block1, #block2')
    – Fenex
    27 сен 2015 в 16:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.