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