<a href="javascript:void(0)" id="loginlink">login</a>
我见过很多次这样的威胁,但我不知道这到底意味着什么。
<a href="javascript:void(0)" id="loginlink">login</a>
我见过很多次这样的威胁,但我不知道这到底意味着什么。
当前回答
除了技术答案之外,javascript:void还意味着作者做错了。
没有充分的理由使用javascript:伪URL(*)。在实践中,如果有人尝试“书签链接”、“在新选项卡中打开链接”等操作,这会导致混乱或错误。现在人们已经习惯了用鼠标中键单击新选项卡:它看起来像一个链接,你想在新的选项卡中阅读它,但事实证明它根本不是一个真正的链接,并且在使用鼠标中键时会产生不想要的结果,如空白页面或JS错误。
<a href=“#”>是一种常见的替代方案,可以说可能不那么糟糕。但是,您必须记住从onclick事件处理程序返回false,以防止链接被跟踪并滚动到页面顶部。
在某些情况下,可能有一个实际有用的地方可以指向链接。例如,如果您有一个控件,可以单击它打开一个以前隐藏的<div id=“foo”>,那么使用<a href=“#foo”>链接到它是有意义的。或者,如果有一种非JavaScript的方式来做同样的事情(例如,‘thispage.php?show=foo’将foo设置为可见),您可以链接到它。
否则,如果链接只指向某个脚本,那么它就不是真正的链接,不应该被标记为链接。通常的方法是将onclick添加到不带href的<span>、<div>或<a>中,并以某种方式对其进行样式设置,以明确您可以单击它。这就是StackOverflow〔在撰写本文时所做的;现在它使用了href=“#”〕。
这样做的缺点是你失去了键盘控制,因为你不能点击span/div/bare-a或用空格激活它。这是否真的是一个缺点,取决于元素打算采取什么样的行动。您可以通过在元素中添加tabIndex并监听空格键来尝试模拟键盘的可交互性。但它永远不会100%再现真实的浏览器行为,尤其是因为不同的浏览器对键盘的响应不同(更不用说非视觉浏览器)。
如果你真的想要一个不是链接但可以通过鼠标或键盘正常激活的元素,你需要的是一个<button type=“button”>(或者<input type=“button”>对于简单的文本内容也是一样好的)。如果需要,您可以始终使用CSS对其进行重新设置样式,使其看起来更像链接而不是按钮。但由于它的行为就像一个按钮,所以你真的应该这样标记它。
(*:无论如何,都是在网站内创作。显然,它们对bookmarklets很有用。javascript:伪URL是一种概念上的奇怪之处:一种定位器,它不指向某个位置,而是调用当前位置内的活动代码。它们对浏览器和网络应用程序都造成了巨大的安全问题,网景公司不应该发明它。)
其他回答
要理解这个概念,首先应该理解JavaScript中的void运算符。
void运算符的语法为:void«expr»,它计算expr并返回undefined。
如果将void实现为函数,则如下所示:
function myVoid(expr) {
return undefined;
}
这个void运算符有一个重要的用法,那就是丢弃表达式的结果。
在某些情况下,返回undefined而不是表达式的结果是很重要的。然后可以使用void来丢弃该结果。一种这样的情况涉及javascript:URL,对于链接应该避免使用javascript,但对于bookmarklets很有用。当您访问其中一个URL时,许多浏览器会将当前文档替换为评估URL“内容”的结果,但前提是结果未定义。因此,如果要在不更改当前显示内容的情况下打开新窗口,可以执行以下操作:
javascript:void window.open("http://example.com/")
除了技术答案之外,javascript:void还意味着作者做错了。
没有充分的理由使用javascript:伪URL(*)。在实践中,如果有人尝试“书签链接”、“在新选项卡中打开链接”等操作,这会导致混乱或错误。现在人们已经习惯了用鼠标中键单击新选项卡:它看起来像一个链接,你想在新的选项卡中阅读它,但事实证明它根本不是一个真正的链接,并且在使用鼠标中键时会产生不想要的结果,如空白页面或JS错误。
<a href=“#”>是一种常见的替代方案,可以说可能不那么糟糕。但是,您必须记住从onclick事件处理程序返回false,以防止链接被跟踪并滚动到页面顶部。
在某些情况下,可能有一个实际有用的地方可以指向链接。例如,如果您有一个控件,可以单击它打开一个以前隐藏的<div id=“foo”>,那么使用<a href=“#foo”>链接到它是有意义的。或者,如果有一种非JavaScript的方式来做同样的事情(例如,‘thispage.php?show=foo’将foo设置为可见),您可以链接到它。
否则,如果链接只指向某个脚本,那么它就不是真正的链接,不应该被标记为链接。通常的方法是将onclick添加到不带href的<span>、<div>或<a>中,并以某种方式对其进行样式设置,以明确您可以单击它。这就是StackOverflow〔在撰写本文时所做的;现在它使用了href=“#”〕。
这样做的缺点是你失去了键盘控制,因为你不能点击span/div/bare-a或用空格激活它。这是否真的是一个缺点,取决于元素打算采取什么样的行动。您可以通过在元素中添加tabIndex并监听空格键来尝试模拟键盘的可交互性。但它永远不会100%再现真实的浏览器行为,尤其是因为不同的浏览器对键盘的响应不同(更不用说非视觉浏览器)。
如果你真的想要一个不是链接但可以通过鼠标或键盘正常激活的元素,你需要的是一个<button type=“button”>(或者<input type=“button”>对于简单的文本内容也是一样好的)。如果需要,您可以始终使用CSS对其进行重新设置样式,使其看起来更像链接而不是按钮。但由于它的行为就像一个按钮,所以你真的应该这样标记它。
(*:无论如何,都是在网站内创作。显然,它们对bookmarklets很有用。javascript:伪URL是一种概念上的奇怪之处:一种定位器,它不指向某个位置,而是调用当前位置内的活动代码。它们对浏览器和网络应用程序都造成了巨大的安全问题,网景公司不应该发明它。)
据我所见,void运算符在JavaScript中有3种常见用法。您所指的<a href=“javascript:void(0)”>是使<a>标记成为no-op的常见技巧。有些浏览器根据是否有a href来区别对待<a>标记,因此这是一种创建与a href链接的方法,但什么都不做。
void运算符是一个接受参数并返回undefined的一元运算符。因此var x=空隙42;表示x===未定义。这很有用,因为在严格模式之外,undefined实际上是一个有效的变量名。因此,一些JavaScript开发人员使用void 0而不是undefined。理论上,您也可以执行<a href=“javascript:undefined”>,这与void(0)相同。
链接必须指定href目标,才能使其成为可用的显示对象。
大多数浏览器不会在<a>元素的href中解析高级JavaScript,例如:
<a href="javascript:var el = document.getElementById('foo');">Get element</a>
由于大多数浏览器中的href标记不允许空白或将空白转换为%20(空格的十六进制代码),JavaScript解释器将遇到多个错误。
因此,如果要使用<a>元素的href来执行内联JavaScript,必须首先为href指定一个不太复杂的有效值(不包含空格),然后在事件属性标记中提供JavaScript,如onClick、onMouseOver、onMouseOut等。
典型的答案是这样做:
<a href="#" onclick="var el = document.getElementById('foo');">Get element</a>
这很好,但它会使页面滚动到顶部,因为告诉浏览器这样做。
在<a>元素的href中放置#指定根锚点,默认情况下,根锚点位于页面顶部,但您可以通过在<a<元素中指定name属性来指定不同的位置。
<a name="middleOfPage"></a>
然后,您可以更改<a>元素的href以跳转到middleOfPage并在onClick事件中执行JavaScript:
<a href="#middleOfPage" onclick="var el = document.getElementById('foo');">Get element</a>
很多时候,你不想让链接跳来跳去,所以你可以做两件事:
<a href="#thisLinkName" name="thisLinkCame" onclick="var elem = document.getElementById('foo');">Get element</a>
现在,单击它时,它将无法移动,但可能会导致页面从当前视口重新居中。
使用<a>元素的href使用内联javascript的最佳方法是javascript:void(0);:
<a href="javascript:void(0);" onclick="var el = document.getElementById('foo');">Get element</a>
这告诉浏览器不要去任何地方,而是执行JavaScript:void(0);函数,因为它不包含空格,并且不会被解析为URL。它将由编译器运行。
void是一个关键字,当提供参数0时,该关键字返回undefined,它不使用任何更多的资源来处理在不指定0的情况下会出现的返回值(它更便于内存管理/性能)。
接下来会执行onClick。页面不会移动,显示时不会发生任何事情。
值得一提的是,检查undefined时有时会看到void 0,因为它需要更少的字符。
例如:
if (something === undefined) {
doSomething();
}
对比:
if (something === void 0) {
doSomething();
}
为此,某些缩小方法将undefined替换为void 0。