Открытие новой вкладки при нажатии кнопки - PullRequest
Новая
       31

Открытие новой вкладки при нажатии кнопки

0 голосов
/ 02 мая 2019

Я хочу создать ссылку, используя кнопку, которая открывается в новой вкладке.

Код, который я использую в данный момент, открывает пустую вкладку, и я не знаю, почему. 

<div class="text text-left">

    <h2>WORK</h2>
    <h1>Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>

    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>

    <button href="https://www.behance.net" onclick="window.open(this.href); return false;">View Project</button>

</div>

Ожидаемый результат - открытие новой вкладки (Behance.com) после нажатия кнопки - не пустая вкладка.

Спасибо.

Ответы [ 5 ]

1 голос
/ 02 мая 2019

Атрибут href не разрешен для элемента button вместо добавления href, просто используйте data-href в HTML, а в JavaScript просто измените this.href на this.getAttribute('data-href'), как показано ниже: 

<div class="text text-left">

    <h2>WORK</h2>
    <h1>Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>

    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>

    <button data-href="https://www.behance.net" onclick="window.open(this.getAttribute('data-href')); return false;">View Project</button>

</div>

Непосредственный запуск кода не будет работать для вас из-за заблокированного разрешения.Вы можете попробовать это в своем собственном проекте.

1 голос
/ 02 мая 2019

this.href недействительно.Используйте this.getAttribute('href')

JSFiddle Demo

Однако, пока это отвечает на ваш вопрос, это не хорошая практика.
Как указал @ Сами Ахмед Сиддики , href не является допустимым атрибутом элемента кнопки.
Вместо этого вы можете использовать атрибут data-*, например data-href.

1 голос
/ 02 мая 2019

Первое, что мне нравится делать при отладке чего-то подобного, это console.log this.href, так как вы не получаете то, что ожидаете. Все признаки проблемы здесь указывают на this.href. Если вы сделаете это, вы увидите, что это дает вам undefined.

То, что вы ищете, это window.location.href. Обновите свой клик, чтобы отразить это.

https://developer.mozilla.org/en-US/docs/Web/API/Window/location

0 голосов
/ 02 мая 2019 

<div class="text text-left">

    <h2>WORK</h2>
    <h1>Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque felis ante, eu convallis sem egestas id.</p>

    <p>Etiam fermentum vestibulum hendrerit. Nam ac felis dolor ultricies varius eget vel arcu.</p>

    <button href="https://www.behance.net" onclick="window.open(this.getAttribute('href'),'_blank')" >View Project</button>

</div>
0 голосов
/ 02 мая 2019

Используйте 

<a href="https://www.behance.net" target="_new" onclick="window.open(this.href); return false;">View Project</a>
...