Этот туториал поможет открыть ссылку в новой вкладке с помощью 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 г.