- How to Open Hyperlink in a New Window
- How to Add target=»_blank» Attribute to Anchor Link
- Example of opening a hyperlink in a new window with the target attribute:
- Result
- Example of opening a hyperlink in a new window with the onclick event:
- Example of opening a link in a new tab with the target and rel attributes:
- window.open()
- Синтаксис
- Открыть страницу в новой вкладке
- Pop-up с заданными размерами
- Взаимодействие с новым окном
- Получить доступ к странице из нового окна
- Закрыть окно с помощью close()
- Проверить закрыто ли окно — свойство closed
- Передать фокус — focus()
- Убрать фокус - blur()
- Изменить размеры или переместить окно
- Прокрутка окна
- Популярные события
- Итого
- HTML target Attribute
- Definition and Usage
- Browser Support
- Syntax
- Attribute Values
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
How to Open Hyperlink in a New Window
Hyperlinks are used to jump from one page to another. A hyperlink commonly opens in the same page by default. But it is possible to open hyperlinks in a separate window.
Opening external links in a new tab or window will make people leave your website. In this way, you prevent your visitors from returning to your website. Remember that visitors can open a new tab themselves and are irritated when a link opens in a new tab or window without their consent. That’s why it’s recommended to avoid opening links in a new tab or window. However, there can be specific situations when this is needed, and in this snippet, we’ll demonstrate how it can be done.
When it is needed to tell the browser where to open the document, the target attribute is used.
How to Add target=»_blank» Attribute to Anchor Link
The target attribute determines where the linked document will open when the link is clicked. It opens the current window by default. To open a link in a new window, you need to add the target=»_blank» attribute to your anchor link, like the following.
Example of opening a hyperlink in a new window with the target attribute:
html> html> head> title>Title of the document title> head> body> h1>Hyperlink Example h1> p> This a href="https://www.w3docs.com/" target="_blank">hyperlink a> will open in a new tab. p> body> html>
Result
In the given example, when the visitor clicks on the hyperlink, it opens in a new window or tab.
There is another way of opening a hyperlink in a new tab by using the JavaScript window.open function with the onclick event attribute like this:
Example of opening a hyperlink in a new window with the onclick event:
html> html> head> title>Title of the document title> style> .link:hover < text-decoration: underline; color: blue; cursor: pointer; > style> head> body> h1>Hyperlink Example with JavaScript h1> p>Visit our website p> a href="https://w3docs.com" onclick="window.open(this.href, '_blank', 'width=500,height=500'); return false;" class="link">W3docs a> body> html>
Let’s see one more example, where besides the target attribute, we also add a rel attribute with the “noopener noreferrer” value. The rel attribute is not mandatory, but it’s recommended as a security measure.
Example of opening a link in a new tab with the target and rel attributes:
html> html> head> title>Title of the document title> head> body> a target="_blank" rel="noopener noreferrer" href="https://www.lipsum.com/">Lorem Ipsum a> p>This link will open in a new browser tab or a new window. p> body> html>
window.open()
open() — метод объекта window позволяет открыть ссылки в новом или всплывающем окне или новой вкладке.
Синтаксис
window.open(url, target, windowFeatures)
url необязательный — относительный или полный путь до страницы в формате строки — заключается в одинарные или двойные кавычки. Если оставить строку пустой » или пропустить параметр, откроется пустая страница.
target необязательный — можно указать имя нового окна — window.name , если метод найдет окно с таким же именем, тогда URL откроется в нем, если нет, то откроется новое. Также параметр может принимать те же значения, что и атрибут target тега , с отличием, что по умолчанию идет _blank :
- _blank — страница будет загружена в новом окне браузера;
- _self — страница загрузиться в том же самом окне;
- _parent — загрузиться в родительской странице текущего элемента. Например если действие происходит во фрейме, ссылка откроется на странице куда он вставлен. Если родительской нет, то работает, как _self .
- _top — страница откроется в окне высшего уровня, какая бы вложенность элементов не была. Если родителя нет, то ведёт себя как _self .
windowFeatures необязательный — здесь можно детально описать, как будет выглядеть новое окно и где располагаться. Параметры записываются через запятую в формате name=value , для булевых можно просто name . Доступные параметры:
- width или innerWidth — ширина содержимого, в том числе полоса прокрутки, минимум 100px;
- height или innerHeight — высота содержимого, в том числе полоса прокрутки, минимум 100px;
- left или screenX — расстояние в пикселях от левой части рабочей области пользователя;
- top или screenY — расстояние в пикселях от верхней части рабочей области пользователя.
- popup — при true ссылка откроется в новом окне.
- noopener — параметр предотвращает доступ новому окну к исходной странице и возвращает null . Все значения второго параметра метода open() , кроме _top , _self и _parent обрабатываются, как _blank .
- noreferrer — блокирует передачу информации о исходной странице и устанавливает noopener=true .
Открыть страницу в новой вкладке
open('https://learnjs.ru/journal/knigi-javascript/', 'BooksJS')
Большинство браузеров блокируют всплывающие окна, которые были вызваны не в результате действий пользователя.
В данном случае ссылка откроется при клике на кнопку без проблем.
Pop-up с заданными размерами
window.open('https://learnjs.ru/', 'LearnJS', 'width=500,height=500,left=650,top=200')
Для удобства третий параметр можно записать в переменную и при вызове метода open() , использовать уже его.
let paramsPopUp = `width=500,height=500,left=650,top=200` window.open('https://learnjs.ru/', 'LearnJS', paramsPopUp)
Взаимодействие с новым окном
open() возвращает ссылку на новое окно, тем самым позволяя манипулировать им с помощью вызова определенных методов и получения значений свойств.
let newWindow = window.open('', 'createWindow', 'popup') newWindow.document.write('Практикуйтесь в написании кода каждый день
')
Здесь мы записали ссылку в переменную newWindow , а затем с помощью write() вывели в новом окне наш текст.
Получить доступ к странице из нового окна
Получить ссылку из нового окна на родителя можно с помощью свойства opener
let myWindow = window.open('','newPopUp','width=200,height=200,left=400,top=200') myWindow.document.write('
Закрыть окно с помощью close()
let newWindow = window.open('https://learnjs.ru', 'LearnJS', 'width=500,height=500') setTimeout(() => newWindow.close(), 3000)
Код откроет всплывающее окно, а через 3 секунды его закроет.
Проверить закрыто ли окно — свойство closed
let newWindow = window.open('', 'newPopUp', 'width=500,height=500') newWindow.document.write('Закрой меня
') let timerId = setInterval(() => < if(newWindow.closed) < alert('Pop-up закрыт') clearInterval(timerId) >>, 1000)
Свойство closed содержит значение true — окно закрыто или false — окно открыто. В нашем примере мы сначала открываем pop-up и далее запускаем проверку — закрыто ли окно. Когда пользователь его закроет, тогда сработает alert(‘Pop-up закрыт’) .
Передать фокус — focus()
Для выполнения задачи есть метод focus()
Здесь мы передали фокус на поле ввода.
Убрать фокус - blur()
Для того, чтобы убрать фокус есть метод blur()
Здесь мы наоборот каждый 0,1 секунду убираем фокус с поля ввода в новом окне. Придется постараться, чтобы туда что-то напечатать.
Изменить размеры или переместить окно
newWindow.moveBy(x,y) - переместить окно в пикселях, x - вправо, y - вниз. Возможны отрицательные значения.
newWindow.moveTo(x,y) - переместить в заданную координату.
newWindow.resizeBy(width,height) - изменить размер окна на указанную величину. Возможны отрицательные значения.
newWindow.resizeTo(width,height) - изменить размер окна на заданное значение.
Методы будут работать, если окно создано вследствие взаимодействия пользователя с элементами страницы. Если окно создается без участия юзера, чаще всего браузеры будут блокировать такие изменения.
Прокрутка окна
newWindow.scrollBy(x,y) - прокрутка окна в пикселях, x - вперед, y - назад. Возможны отрицательные значения.
newWindow.scrollTo(x,y) - прокрутить окно к указанным координатам.
element.scrollIntoView(top) - прокрутить окно так, чтобы был полностью виден указанный элемент. Если значение top равно true или не задано, тогда верх элемента совпадает с верхом экрана, если false , тогда низ с низом.
Популярные события
onresize - изменение размера окна
onload - страница загружена
onfocus - фокус установлен
По клику создаем pop-up, а далее отслеживаем, когда input получит фокус. При достижении события добавляем в наше всплывающее окно заветное Пора учить JavaScript.
Итого
1. Метод open() позволяет открывать всплывающие окна и новые вкладки, а также получать ссылки на них, тем самым давая возможность манипулировать ими.
2. Не только родитель имеет доступ к новому окну, но и новое окно может получить доступ к исходному с помощью свойства opener .
3. Браузеры настороженно относятся к новым окнам, которые были открыты или изменены без ведома пользователя, поэтому подобные события часто блокируются.
4. Создавая новое окно с помощью метода open() , можно указать через параметры его размер, а также как и где оно будет открыто.
5. Полезные методы для взаимодействия в новым окном:
- close() - закрыть окно;
- focus() - передать фокус;
- blur() - убрать фокус;
- moveBy(x,y) , moveTo(x,y) , resizeBy(width,height) , resizeTo(width,height) - изменение размеров и перемещение;
- scrollBy(x,y) , scrollTo(x,y) , scrollIntoView(top) - прокрутка окна.
Skypro - научим с нуля
HTML target Attribute
The target attribute specifies where to open the linked document:
Definition and Usage
The target attribute specifies where to open the linked document.
Browser Support
Syntax
Attribute Values
Value | Description |
---|---|
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked (this is default) |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
framename | Opens the linked document in the named iframe |
❮ HTML tag
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.