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

Question

我有这样的代码，我想调用 JavaScript function 返回网站链接。 我希望哪个链接成为 href="" 属性的值。 所以在某个地方我得到了这样做的解决方案。 但是没有定义为什么要这样做。 这是我的代码。 我想知道为什么调用javascript function里面的href属性要写成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:是您当前所在页面的协议。

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

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

参见MDN <a/>标签href ：

href

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

• 包含片段 URL 的页面部分
• 带有媒体片段的媒体文件
• 带有 tel: URL 的电话号码
• Email 地址与 mailto: URLs
• 虽然 web 浏览器可能不支持其他 URL 方案，但 web 站点可以使用 registerProtocolHandler()

---

如果你打算打电话给一些 JavaScript function，你不应该使用href ，这就是onclick的用途，或者更好的是addEventListener()并且如果锚点不会“带你去任何地方”，请使用<button/>无障碍。

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

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

请改用<button> 。 通常，您应该只使用超链接导航到真实的 URL。