如何使 HTML 按钮的行为与超链接一样？答案

【问题标题】：How do you make an HTML button behave just like a hyperlink?如何使 HTML 按钮的行为与超链接一样？
【发布时间】：2021-09-30 22:54:40
【问题描述】：

如何让 HTML 按钮表现得像一个超链接，如果你点击它，它会打开一个浏览器窗口，显示你想要的页面？

我明白这一点。我想我会用这个但我不想在“onclick”的引号内添加一些 javascript 代码的链接，而是想放一些简单的东西来启动一个新的浏览器窗口。

【问题讨论】：

<a target="_blank" href="...">Why not just use a hyperlink?</a>.
因为，你可以用按钮做一些你不能用超链接做的事情。 IE：方方正正的边框，很容易风格化......也许他想打开一个窗口并做更多的事情，等等
将锚标签包裹在按钮周围怎么样？
Daniel，这确实有效，但我不喜欢它，因为它有点……将代码放大了很多，一行。同样，我不喜欢人们做像
因为它变得不可读，而在文件的开头好多了。基本上，我的经验法则是使标签尽可能短。当然，很多 [我的意思是，很多] 人会不同意我的观点。
但是再一次，你的想法是完全有效的。

标签： javascript html onclick

【解决方案1】：

onclick and window.open

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

【讨论】：

这是有效的并且有效，但是应该考虑到它的可访问性含义。使用屏幕阅读器或其他辅助功能的用户将不再知道链接的去向，这可能会告知他们该链接是否会将他们带到他们期望去的地方。请，请，请谨慎使用它，或者如果可以的话，完全避免使用它。为链接设置样式可能需要更多的努力，但对于最终用户体验来说要好得多。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我认为这是最适合您的解决方案。

试试这个

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

编码愉快！！

【讨论】：

那是无效的 HTML，不会始终如一地工作。

【解决方案4】：

你可以这样做：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我知道，我迟到了 7 年，但我遇到了类似的问题，我想我为那些可能关注的人发表评论。

如果您使用的是 Bootstrap，您可以将 Bootstrap 按钮类名附加到锚标记，并使它们看起来像按钮：

<a href="path/file.ext" class="btn btn-md btn-link">I Look Like A Button</a>

Bootstrap 也支持基本大小，包括 btn-sm 或 btn-lg。诚然，不是每个人都使用 Bootstrap，但即便如此，默认样式也是免费的，很容易找到，即使您使用的是自定义样板布局，也可以将其复制到您自己的样式表中。

【讨论】：

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

【解决方案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 的建议。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review