时间戳

首页 > 解决方案 > 为什么在锚标签的href属性中使用“javascript:function()”来调用javascript函数

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

问题描述

我有这样的代码，我想调用一个返回网站链接的 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>

标签： javascripthtml

解决方案

有一个像这样的锚

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

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

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

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

见MDN<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 正在加载、错误或被禁用时会导致意外行为。它们还会向屏幕阅读器等辅助技术传达不正确的语义。

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

推荐阅读