19

在 Google 和 Yahoo 搜索页面上,10 个搜索结果链接的 URL 实际上指向 google.com 或 yahoo.com。URL 有额外的参数,允许 google.com 或 yahoo.com 在单击链接时重定向到实际的搜索结果。当用户将鼠标悬停在链接上时,搜索结果 URL(而不是 google.com 或 yahoo.com URL)会显示在浏览器的状态栏中。

我想知道他们是怎么做到的。

许多年前,这可以通过设置 window.status 的一些 javascript 来完成,但这似乎不再起作用,正如Reliable cross browser way of setting Status bar text所解释的那样

我有一个看起来像这样的链接: <a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar" onmouseover="window.status='http://niceShourtUrl.com/'" onmouseout="window.status=''">Click Me</a>

此链接尝试使用 window.status 策略,但它不起作用。如何修复此链接,使其类似于 Google 和 Yahoo 搜索结果页面上的链接?在此示例中,我希望在用户将鼠标悬停在链接上时在状态栏中显示“ http://niceShourtUrl.com/ ”。

4

6 回答 6

14

很难阅读源代码,但您会看到实际上 URL(在<a>标签中)是正确的目标 URL,这就是为什么浏览器的状态栏会显示正确的 URL(而不是它在何时重定向您通过的跟踪链接)你实际上点击)。然后有一些onclickJavaScript 可以在浏览器的默认操作(按照链接)发生之前拦截点击。

于 2010-05-11T19:05:46.843 回答
8

Google 在每个链接上都有 onMouseDown 处理程序,这些处理程序将链接从指向 Google 重定向的原始源更改。所以 onmousedown 替换了链接,当onClick出现时(在 onmousedown 之后不久),链接已经指向原始方向以外的其他地方。

步骤 1. 用户点击链接(鼠标按钮按下)

Step 2. onMouseDown 事件触发

步骤 3. 链接目标(href 值)被更改

步骤 4. 鼠标按钮出现

步骤 5. onClick 事件触发器

步骤 6. 浏览器看到一个链接被点击并将用户转发到所需的目的地(由已更改的 href 值设置)

步骤 7. 浏览器打开一个谷歌重定向页面,这会将用户转发到原始目的地

更新:谷歌过去只跟踪 onmousedown 事件的点击,并没有改变链接目标。onmousedown => new Image("coogle.counter.server.com/link=www.pressed.com")当在链接上按下鼠标按钮时,会向谷歌服务器发出图像加载请求,该请求会计算点击次数(

于 2010-05-11T19:17:48.280 回答
6

我认为他们实际上在链接中有完整href的链接。但是他们使用 javascript 来捕获onclick然后当您单击链接时,它会通过他们的站点进行路由。

于 2010-05-11T19:06:15.843 回答
3

例如,指向 StackOverflow 的链接实际上如下所示:

<a onmousedown="return clk(this.href,'','','res','1','','0CBwQFjAA')" class="l" href="http://stackoverflow.com/"><em>Stack Overflow</em></a>

现在 click 函数在最小化的源代码中的某个地方。在这里,您可以看到带有一些额外空格的代码:

window.clk = function ( e, f, g, k, l, b, m )
{
    if ( document.images )
    {
        var a = encodeURIComponent || escape,
            c = new Image,
            h = window.google.cri++;

        window.google.crm[h] = c;
        c.onerror = c.onload = c.onabort = function()
        {
            delete window.google.crm[h]
        };

        var d, i, j;

        if ( google.v6 )
        {
            d = google.v6.src;
            i = google.v6.complete || google.v6s ? 2 : 1;
            j = (new Date).getTime() - google.v6t; delete google.v6
        }

        if ( b != "" && b.substring( 0, 6 ) != "&sig2=" )
            b = "&sig2=" + b;

        c.src = [
                "/url?sa=T",
                "&source=" + google.sn,
                f ? "&oi=" + a(f) : "",
                g ? "&cad=" + a(g) : "",
                "&ct=",
                a( k || "res" ),
                "&cd=",
                a( l ),
                "&ved=",
                a( m ),
                e ? "&url=" + a( e.replace( /#.*/, "" ) ).replace( /\+/g, "%2B" ) : "",
                "&ei=",
                google.kEI,
                d ? "&v6u=" + a( d ) + "&v6s=" + i + "&v6t=" + j : "",
                b ].join( "" )
    }
    return true
 };

在没有真正详细查看它的情况下,关于它的重要思想是它计算一些 google url,并this.href在您单击链接时将(=链接的链接目标!)设置为该新 url。之后,然后评估链接,尽管之前显示了原始链接 url,但浏览器会将您发送到更改后的 url。

于 2010-05-11T19:17:46.423 回答
1

这是一个多部分的过程。对于给定的<a>标签,hrefHTML 中的属性将指向实际页面。这允许没有 JavaScript 的浏览器转到正确的位置。

接下来,mousedown链接上有一个事件处理程序。当您将鼠标悬停在链接上时按下鼠标按钮时会触发 mousedown 事件。即使按下鼠标右键或中键也会触发此事件。处理程序将 替换为href搜索引擎域中的重定向脚本。

这样,他们仍然会在最后一刻显示正确的 URL,但他们仍然使用重定向命中记录器,即使您在新选项卡中打开链接也是如此。

于 2010-05-11T19:19:45.363 回答
0

看来他们的做法与您在示例中的做法完全相反。他们有 href="the link" 和 onclick 事件作为跟踪功能。

于 2010-05-11T20:58:17.897 回答