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



我有这样的代码,我想调用一个返回网站链接的JavaScript函数。我想成为 href=" 属性的值。所以在某个地方我得到了这样做的解决方案。但是没有定义为什么要这样做。这是我的代码。我想知道为什么要在href属性href="javascript:functionname()"中调用javascript函数,而不是href="functionname()"。

function hyperlinker(){
document.location.href="https://www.google.co.in";
}
<a href="javascript:hyperlinker()"> click to get new page </a>

有一个像这样的锚点

<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 方案:

  • 网页中包含片段网址
  • 的部分 包含媒体片段
  • 的媒体文件片段
  • 带电话的电话号码:网址
  • 包含邮件收件人的电子邮件地址:网址
  • 虽然 Web 浏览器可能不支持其他 URL 方案,但网站可以使用 registerProtocolHandler()

如果你的目的是调用一些JavaScript函数,无论如何你不应该使用href,这就是onclick的用途,或者更好的是addEventListener(),如果锚点不会"带你去任何地方",请使用<button/>的可访问性。

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

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

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

最新更新