浏览器如何显示链接的目标url

How do browsers display the target url of a link

本文关键字：链接 目标 url 显示 何显示 浏览器      更新时间：2023-09-26

如果你用google搜索某个字符串，浏览器会以可点击链接的形式呈现搜索结果。现在我的问题来了。如果你把鼠标悬停在这些链接的左下角，你就能看到点击它后浏览器会把你带到哪里。我想知道浏览器是怎么做的

我不认为搜索结果实际上是基于HTML的锚标记。至少我是这么觉得的。但即使在这些情况下，只要我们将鼠标悬停在链接上，目标url就会显示出来。

请分享你的想法，我需要在js代码中做同样的事情。

->谢谢你的回答。我问这个问题是有原因的。我必须启用网页之间的拖放，我要在一个SWT浏览器和java GUI显示。为了做到这一点，在mousedown事件中，我正在触发javascript代码。这基本上获取用户单击的锚元素上的HREF属性。**问题来了。如果我打开google.com，如果我用鼠标点击IMAGE,YOUTUBE,GMAIL,DRIVE链接，目标URL就会出现。但是，如果我尝试在google搜索或我们原来的瘦客户端应用程序(我们需要启用拖放功能)中对任何结果进行鼠标下移，则链接不会出现。但是，底部的浏览器显示目标链接。我很困惑。这就是为什么我认为它不是锚标记的原因。

我尝试用以下代码为所有锚元素注册一个onmousedown。但是如果用户在任何搜索结果上按下鼠标…没有出现警告框。

var elements = document.getElementsByTagName('a');
for(var i=0;i<elements.length;i++)
{
    elements[i].onmousedown = function()
    { 
          alert(this.getAttribute('href'));
    }
}
我不认为搜索结果实际上是基于HTML的锚标记。至少我是这么觉得的。

你感觉不对。搜索结果为<a>元素。

但即使在这种情况下，只要我们将鼠标悬停在链接上，目标url就会显示出来。

浏览器必须知道链接的位置。它可以让它的UI做任何它喜欢的事情。

请分享你的想法。

自带代码

我需要在js代码中做同样的事情。

鼠标悬停事件中的window.status = element.href。

现在一些浏览器会阻止这个，因为它对网络钓鱼攻击来说太有用了(欺骗用户去他们期望去的地方以外的地方)。

搜索引擎结果，至少从google，呈现为html锚标记。无需猜测，检查搜索页面的html来源。

所以关于在悬停状态栏中显示链接的部分，这是标准行为(当我悬停在你的名字上时，我看到一个url到你的So配置文件)。

我将采取一个飞跃，假设你想弄清楚的，是如何呈现一个链接作为锚标记，但仍然做一些javascript的东西，而不是默认的锚标记行为。就像谷歌如何将跟踪信息附加到url上，而不是仅仅在选项卡中打开搜索结果url。

要做到这一点，您需要将事件处理程序附加到锚标记以捕获"click"事件，防止真正的单击事件的传播，并执行您的工作。所以HTML看起来像一个锚标记，但当你点击它时，它就是你的javascript。

你会发现很多关于这个问题的参考，比如jQuery:捕获锚点href点击并异步提交，或者只是基本的谷歌搜索如何捕获锚点/href事件。

您可以这样更改状态栏:href是状态栏中的文本，当用户单击链接时，它将更改为实际url:

    <a href="status bar" onmousedown="this.href='real page';">Link</a>

如果你看一下Google搜索页面的源代码，你会发现链接的格式是

<a onmousedown="return rwt(...)" href="http://somelink.com/somepath/">...</a>
  • 最初，链接的href属性是正确的，所以它在悬停时正确显示。
  • 然而，它得到突变在点击时间由谷歌的rwt功能，改变href属性为http://www.google.com/url?... URL。
  • 这种突变发生在鼠标按向下——就在浏览器跟随链接之前(当按钮被释放向上时发生)。

您可以通过右键单击结果链接并看到URL在单击时的变化来轻松观察此行为。

相关文章：