为什么在锚标签的 href 属性中使用“javascript:function()”

Question

我有这样的代码，我想调用一个返回网站链接的 JavaScript 函数。我希望哪个链接成为 href="" 属性的值。所以在某个地方我得到了这样做的解决方案。但是没有定义为什么要这样做。这是我的代码。我想知道为什么在 href 属性中调用 javascript 函数要写成 href="javascript:functionname()" 而不是 href="functionname()"。function hyperlinker(){  document.location.href="https://www.google.co.in";  }<a href="javascript:hyperlinker()"> click to get new page </a>

Answer 1

有一个锚点

<a href="somefunc()">Click Me</a>

将被解释为“尝试导航到路由 somefunc()”。所以你会被送到http://www.example.com/somefunc()。http:您所在的当前页面的协议在哪里。

The javascript:，很像 thehttp:和 themailto:和 thetel:以及任何其他类似的前缀是要使用的协议。如果您将其关闭，则将其留给浏览器的默认行为。对于相对 URL（这是你写的），它将默认为http:（感谢 Barmar）

您不需要包括协议（默认情况下浏览器使用 HTTP）或端口（仅当目标 Web 服务器使用一些不常见的端口时才需要），但 URL 的所有其他部分都是必需的。

请参阅<a/>标签href：

href

超链接指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 方案：

• 包含片段 URL 的页面部分

• 带有媒体片段的媒体文件

• 带有 tel: URL 的电话号码

• 带有 mailto: URL 的电子邮件地址

• 虽然 Web 浏览器可能不支持其他 URL 方案，但网站可以使用 registerProtocolHandler()

---

但是，如果您打算调用某些 JavaScript 函数，那么您href无论如何都不应该使用，这就是目的onclick，或者更好的是addEventListener()，如果锚点不会“带您到任何地方”，请使用 a<button/>以获得可访问性。

锚元素经常被滥用为假按钮，方法是将它们设置 href为#或javascript:void(0)以阻止页面刷新，然后监听它们的click事件。

这些虚假href值会在复制/拖动链接、在新选项卡/窗口中打开链接、添加书签或加载 JavaScript、错误或禁用时导致意外行为。它们还会将不正确的语义传达给屏幕阅读器等辅助技术。

使用一个<button>代替。通常，您应该只使用超链接导航到真实的 URL。