如何使HTML按钮的行为与超链接类似？

Question

如何使HTML按钮的行为类似于超链接，即当单击它时，它将打开一个浏览器窗口，显示您想要的页面？

我了解这么多。 我想我会使用以下代码：

```html Click Me! ```

但是，我想在“onclick”引号内放置一些简单的内容，以启动一个新的浏览器窗口，而不是链接到某些JavaScript代码。

- xarzu

---

<a target="_blank" href="...">为什么不直接使用超链接呢？</a> - kennytm

因为按钮可以做一些超链接无法实现的功能。例如：方框边框易于样式化...也许他还想打开一个窗口并执行更多操作等。 - Warty

将锚点标签包裹在按钮周围怎么样？ - Daniel T.

Daniel，那确实可以用，但我不喜欢它，因为它会让一行代码变得很长。同样的，我也不喜欢人们这样做：<div id="amazing_div_that_is_cool" style="...something that goes on for lines and lines..."> 因为它会变得难以阅读，而使用文档头部的<style>标签则好得多。基本上，我的经验法则是尽可能保持标签的简短。当然，很多人（我指的是很多人）会不同意我的看法。 - Warty

但是再次强调，你的想法非常有价值。 - Warty

它需要是一个按钮，因为它将位于一个真正的按钮旁边，这样做很容易。我用以下代码解决了这个问题： ...onclick="window.open('http://www.example.com','_blank','resizable=yes')" /> 现在我只需要知道使用哪些属性可以让弹出窗口有滚动条。 - xarzu

Answer 1

onclick 和 window.open

<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />

- YOU

---

这是有效的并且可行的，但是我们应该考虑到它对无障碍性的影响。使用屏幕阅读器或其他辅助功能的用户将不再知道链接的目的地，这可能会告诉他们链接是否会带他们到他们期望的位置。请谨慎使用这种方法，如果可以的话最好避免使用。虽然样式化链接可能需要更多的工作，但对最终用户体验来说更好。 - Adam

Answer 2

In Head:  
<script>
openNewWindow = function()
{
 window.open(url, "_blank");
};
</script>
In Body:    
<input type="button" onclick="openNewWindow()" >

我更喜欢定义一个名为openNewWindow()的函数而不是将代码放在输入标签中。这是为了组织。如果您计划拥有许多不同的按钮来打开不同的窗口，我强烈建议您这样做。

- Warty

Answer 3

我认为这是你最好的解决方案。 试一试吧。

<a href="http://www.stackoverlfow.com" target="_"><input 
type="button" value="Click Me"/></a>

愉快的编码！！

- Ravi Vanapalli

---

这是无效的HTML，不能保证始终正常工作。 - Quentin

Answer 4

你可以像这样做：

你可以像这样做：

window.open(url, "window-name", "menubar=no,innerWidth=600,innerHeight=600,toolbar=no,location=no,screenX=400,screenY=40");

将名称传递给open方法会导致浏览器打开一个新窗口。第三个参数定义了新窗口的外观。

- Kees de Kooter

Answer 5

<input type="button" value="Google"
       onclick="window.open('http://www.google.com', '_blank');" />

- Josh Stodola

Answer 6

我晚了7年，我意识到这一点，但我遇到了类似的问题，并想为那些可能会遇到同样问题的人提供评论。

如果您使用Bootstrap，可以将Bootstrap按钮类名附加到锚标记上，使它们看起来像按钮： 我看起来像一个按钮 Bootstrap还支持基本大小，包括btn-sm或btn-lg。当然，不是每个人都使用Bootstrap，但即使如此，默认样式也是免费的，易于找到，并且可以复制到自己的样式表中，即使您正在使用自定义样板布局。

- RalphTheWonderLlama

---

最终，这个解决方案（即仅使用CSS样式）是所有解决方案中最干净的。 - Al Kepp

Answer 7

关于内容安全策略，我看到了很多相互矛盾的信息。Google开发者网站web.dev的主要建议可以在这里找到 => https://web.dev/strict-csp/#what-is-a-strict-content-security-policy。

有几个专业级别的建议指出应该使用CSP。我现在编写HTML网站，但打算转向Angular和/或React。与此同时，建议使用js脚本获取元素ID并通过脚本转发，而不是使用链接。

这样做的理由是跨站脚本攻击者可以利用这些元素的漏洞，当使用“onclick”或相关命令时。这将消除漏洞。

我建议从CSP的角度来处理，并遵循链接的指南，使您的网站符合W3和Google的建议。

- jdrake6789

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。- 来自审查 - Toni