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

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

<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) после нажатия кнопки - не пустой вкладки.

Спасибо.

0
Nathan Wilson 2 Май 2019 в 14:21

5 ответов

Лучший ответ

Атрибут 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
Sami Ahmed Siddiqui 2 Май 2019 в 11:38
<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>
-1
bharath s 2 Май 2019 в 11:46

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

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

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

1
Alexander Lallier 2 Май 2019 в 11:24

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

Демонстрация JSFiddle


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

1
NullDev 2 Май 2019 в 13:05

Использовать

<a href="https://www.behance.net" target="_new" onclick="window.open(this.href); return false;">View Project</a>
0
Mohan 2 Май 2019 в 11:26