Question

我想使用在新标签页中打开的按钮创建链接。

我目前使用的代码当前正在打开一个空白标签，我不确定原因。

<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）-不是空白选项卡。

谢谢。

Answer 1

调试此类内容时，我想做的第一件事是if <condition1> then ... elseif <condition2> then ... else ... end console.log，因为您没有得到期望的结果。这里所有问题的迹象都指向this.href。如果这样做，您会看到它为您提供this.href。

您要寻找的是undefined。更新您的onclick以反映这一点。

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

Answer 2

this.href无效。使用this.getAttribute('href')

JSFiddle Demo

但是，这虽然回答了您的问题，但这不是不是的好习惯。
正如@Sami Ahmed Siddiqui指出的那样，href不是按钮元素的有效属性。
相反，您可以使用data-*之类的data-href属性。

Answer 3

不允许在元素href上使用属性button而不是添加href，而只需在HTML和JavaScript中使用data-href即可，只需将this.href更改为{{1} }，如下所示：

this.getAttribute('data-href')

由于权限被阻止，直接运行代码对您不起作用。您可以在自己的项目中尝试。

Answer 4

使用

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

Answer 5

<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>

在按钮上打开新标签页

5 个答案: