Этот туториал поможет открыть ссылку в новой вкладке с помощью javascript. Метод open()
оконного интерфейса используется для открытия контента в новой вкладке, окне или даже iframe
.
Как создать якорную ссылку
Атрибут href элемента привязки ( a
) должен быть установлен на URL-адрес, на который вы хотите сослаться, чтобы создать ссылку на веб-странице.
Check out <a href="https://www.js-tutorials.com/">js-tutorials.com</a>
Вывод: зайдите на js-tutorials.com.
Если вы нажмете на ссылку выше, браузер откроет ссылку в текущем окне или вкладке.
Чтобы открыть ссылку в новой вкладке, необходимо установить для атрибута target
значение _blank.
Check out <a href="https://www.js-tutorials.com/" target="_blank" rel="noreferrer noopener">js-tutorials.com</a>
Вывод: зайдите на js-tutorials.com.
если вы нажмете на ссылку выше, браузер откроется в новой вкладке или новом окне в зависимости от настроек браузера человека.
метод window.open
Метод window.open()
позволяет открыть новое окно браузера, не покидая текущую страницу.
Синтаксис: window.open(URL, Target, WindowFeatures);
- URL: это ссылка на веб-страницу, на которую необходимо установить ссылку.
- Цель: может быть
_blank
,_self
,_parent
,_top
. Это означает, где загрузить URL. Like _self откроет ссылку в той же вкладке, над которой вы работаете,_blank
откроет ссылку в новой вкладке. - WindowFeatures: указывает для нового окна, которое открывается, как width, height, screenX, screenY , всплывающее окно и т. д.
Объявления
Базовый метод принимает два аргумента: URL-адрес, который вы хотите открыть, и строку, указывающую целевое окно, в котором должен быть открыт URL-адрес.
Вот простой пример:
const openInNewTab = (url) => { window.open(url, "_blank"); }
Вызовем функцию напрямую:
openInNewTab("https://www.js-tutorials.com.com/");
Использование события Button onclick
Вы также можете создавать определенные функции для отдельных URL-адресов и
Давайте создадим пример, который откроет ссылку в новой вкладке. Мы добавим событие onclick
к вашей HTML-кнопке.
<!DOCTYPE html> <html> <head> <title>How To Open JavaScript Link in New Tab</title> </head> <body> <button onclick="window.open('https://www.js-tutorials.com','_blank');"> CLICK HERE </button> </body> </html>
Первоначально опубликовано на https://www.js-tutorials.com 27 января 2023 г.