logo标签列表

window.location.href与单击锚点的区别

javascript
28

点击以下两个链接有何不同：

<a href />

vs.

调用 window.location.href = ... ？

6个回答
56
在可能的情况下，你应该使用<a href="foo.html">而不是window.location.href，有很多非常好的理由。
  1. 如果你禁用了JavaScript，这些链接将无法使用。
  2. 搜索引擎蜘蛛（如Google Bot）不解释JavaScript，因此它们不会跟随你的任何链接。
  3. 它破坏了互联网。不，真的-万维网是建立在页面之间可发现连接的基础上的。用非标准的链接来隐藏这些连接违背了这个前提。
  4. 这会导致糟糕的用户体验：用户期望当他们将鼠标悬停在链接上时，可以访问一些信息：
    • 状态栏中显示的目的地（非常重要！）
    • 右键单击 -> 复制链接位置
    • 中键单击 -> 打开新选项卡
    • 等等
    • 使用window.location会使所有这些功能失效。
  5. 这更容易！
好的回答。我也想补充说明 Shift + 单击可以在新窗口中打开，Ctrl + 单击可以在新标签页中打开。 - Chris Calo
我还会在列表中添加可访问性，我认为JavaScript重定向永远无法被屏幕阅读器猜测到，而HTML锚点具有适当的属性。 - Flo Schild
5

设置 window.location.href = 'thepage.html' 与调用以下代码相同：

window.open('thepage.html', '_self');

即目标限制于同一窗口，因为这是位置属性所在的地方。这与未带有目标属性的链接单击具有相同的效果：

<a href="thepage.html">...</a>

您可以使用open方法来指定不同的目标，比如新窗口：
window.open('thepage.html', '_blank');

这与点击具有相同目标的链接具有相同的效果：
<a href="thepage.html" target="_blank">...</a>

您也可以使用open方法打开一个新窗口。返回值是对该窗口的引用，因此您可以使用它来设置该窗口的位置，而不是当前窗口：

var w = window.open('about:blank', '_blank');
w.location.href = 'thepage.html';
1

除了上面的答案外，也不要忘记点击超链接（锚标签）将触发该元素的onclick处理程序（如果有），而Javascript版本显然不会这样做，它只会更改窗口位置。

如果您想模拟点击，则可以从Javascript手动调用onclick处理程序，但必须记得手动执行此操作。您发布的代码片段在这方面可能有所不同，这可能是任何行为差异的原因。

0

使用锚点可以指定目标属性，但使用window.location.href则不行。 通常情况下，当用户想要将浏览器重定向到另一个位置时，会使用锚点；而在使用JavaScript进行重定向时，则使用window.location.href。

3
这个说法有点正确但有点误导。在JavaScript版本中，通过调用方法的对象来隐式选择目标。window.location.href会改变当前窗口，但是如果适当声明了变量，mytarget.location.href将会改变另一个窗口/框架。 - Andrzej Doyle
无论如何，您都不应该使用目标属性。 - Josh Stodola
1
谁说的？无论如何，他要求区别，这是其中之一，所以继续投票反对，但是这是正确的。 @dtsazza：你是对的，但他在谈论window.location而不是somethingElse.location。 - mck89
1
@mck：是的，这就是我第一句话中的混淆之处。严格按照字面意思来说，你是正确的，但我在稍微广义地解释问题时将其解释为“JavaScript与锚点点击的比较”；你提到的限制并不适用于JavaScript方法。尽管我没有投票，但我认为你的回答并不值得被否决，只需要澄清一下即可。 :-) - Andrzej Doyle
0
除了其他答案之外，单击具有指定 href 属性的 <a> 元素将导致浏览器导航到 href 中的 URL，无论 JavaScript 是否启用。
0

document.referrer 包含了一个引用，指向包含用户点击链接以进入新页面的页面的 URL，既可以在服务器端也可以在客户端使用。而脚本化的位置方法则不包含此信息。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接