Блог

Главная - Вопросы по программированию - Как открыть новое окно при нажатии на тег в html

Как открыть новое окно при нажатии на тег в html

#javascript #html

#javascript #HTML

Вопрос:

Я не имею в виду вот так

 <a href="youtube.com" target="_blank">Youtube Link</a>

Я имею в виду, что когда вы нажимаете на тег, он открывает новое окно, как при оплате через Paypal на другом сайте.

введите описание изображения здесь

Итак, мой код

 <a href="youtube.com">Youtube Link</a>

Ответ №1:

Это можно сделать с помощью onclick атрибута:

 <a href="#" onclick="window.open('https://youtube.com/', 'yt', 'height=600,width=800')">Link text</a>

Ответ №2:

это должно быть сделано с помощью javascript.

 <a href="#" id="openWindow">Youtube</a>

let link = document.getELementById('openWindow');

link.addEventListener('click', function(event) {
   window.open("https://youtube.com/", "youtube");
});

дополнительная информация для window MDN

Ответ №3:

Если вы хотите открыться в совершенно новом окне (т.Е. «всплывающем окне»), ни <a /> одно из «целевых» значений HTML anchor () не будет работать для этого. Вместо этого вам нужно будет использовать javascript, в данном случае window.open (подробнее).

В приведенном ниже примере я использую класс, и .querySelectorAll() поэтому вы можете повторно использовать класс по любым ссылкам, которые вы хотите использовать для этой функции. Я также сохраняю атрибуты href и target в привязке, поэтому в случае, если javascript отключен или пользователь нажимает на ссылку до завершения загрузки страницы, она все равно, по крайней мере, откроет ссылку на новой вкладке.

Имейте в виду также, что window.open() для запуска всплывающего окна требуется 3-й аргумент вызова, иначе он просто откроется на новой вкладке, например target="_blank" . Кроме того, не стесняйтесь настраивать параметры 3-го аргумента в соответствии с вашим вариантом использования, однако, чтобы «всплывающее окно» все еще работало, вам нужно убедиться, что menubar=no оно используется, ИЛИ полностью исключить эту опцию.

 <a href="https://youtube.com/" target="_blank" class="js-new-window">Youtube</a>

<script>
    const links = document.querySelectorAll('.js-new-window');
    links.forEach((link) => {
      link.addEventListener('click', function(event) {
        event.preventDefault();
        window.open(event.currentTarget.href, 'new-window', 'height=600,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=yes,directories=yes,status=yes');
      })
    });
</script>