Как Google и Yahoo заменяют URL в строке состояния браузера?

Question

На страницах поиска Google и Yahoo URL-адреса 10 ссылок на результаты поиска фактически указывают на google.com или yahoo.com. URL-адреса имеют дополнительные аргументы, которые позволяют google.com или yahoo.com перенаправлять на фактический результат поиска при нажатии на ссылку. Когда пользователь перемещается по ссылке, в строке состояния браузера отображается URL-адрес результата поиска (а не URL-адрес google.com или yahoo.com).

Мне интересно, как они это делают.

Много лет назад это было бы достигнуто с помощью некоторого javascript, который устанавливает window.status, но, похоже, он больше не работает, как объясняется Надежный кросс-браузерный способ установки текста строки состояния

У меня есть ссылка, которая выглядит следующим образом: <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/" отображалось в строке состояния, когда пользователь наводит указатель мыши на ссылку.

Answer 1

Трудно прочитать источник, но вы увидите, что фактически URL-адреса (в тегах <a>) являются правильными целевыми URL-адресами, поэтому в строке состояния браузера отображается правильный URL-адрес (вместо ссылки отслеживания). что он перенаправляет вас, когда вы действительно нажимаете). Затем существует некоторый onclick JavaScript, который может перехватывать щелчки до того, как будет выполнено действие браузера по умолчанию (по ссылке).

Answer 2

У Google есть обработчики onMouseDown для каждой ссылки, которые изменяют ссылку с исходного источника, указывая на перенаправление Google. Таким образом, onmousedown заменяет ссылку, и когда появляется onClick (вскоре после onmousedown), ссылка уже указывает куда-то, кроме исходного направления.

Шаг 1. Пользователь нажимает на ссылку (кнопка мыши нажата)

Шаг 2. Событие onMouseDown вызывает

Шаг 3. Изменение цели ссылки (значение href)

Шаг 4. Кнопка мыши появляется

Шаг 5. Событие onClick вызывает

Шаг 6. Браузер видит, что была нажата ссылка, и перенаправляет пользователя к желаемому месту назначения (заданному уже измененным значением href)

Шаг 7. Браузер открывает страницу перенаправления Google и перенаправляет пользователя в исходное место назначения

Обновлено: Google использовал для отслеживания кликов только по событию onmousedown и не изменял назначение ссылки. При нажатии кнопки мыши на ссылке был сделан запрос на загрузку изображения на серверы Google, который подсчитал клик (onmousedown => new Image("coogle.counter.server.com/link=www.pressed.com")), но я полагаю, что он был использован не по назначению или был недостаточно надежным, чтобы они решили использовать текущую технику изменения ссылки .

Answer 3

Я думаю, что они на самом деле имеют полную ссылку в href ссылки. НО они используют javascript для перехвата onclick, а затем, когда вы нажимаете на ссылку, он проходит через их сайт.

Answer 4

Например, ссылка на StackOverflow выглядит так:

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

Теперь функция щелчка находится где-то внутри этого минимизированного исходного кода. Здесь у вас есть код с дополнительными пробелами:

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
 };

Не вдаваясь в подробности, важно понять, что он вычисляет некоторый URL-адрес Google и устанавливает this.href (= цель ссылки на ссылку!) Для этого нового URL-адреса при нажатии на ссылку. После этого ссылка оценивается, и браузер отправляет вам этот измененный URL, несмотря на то, что ранее отображался исходный URL ссылки.

Answer 5

Это составной процесс. Для данного тега <a> атрибут href в HTML будет указывать на фактическую страницу. Это позволяет браузерам без JavaScript перейти в нужное место.

Далее, по ссылке есть обработчик события mousedown. Событие mousedown возникает, когда вы нажимаете кнопку мыши, когда наводите указатель мыши на ссылку. Это событие возникает даже при нажатии правой или средней кнопки мыши. Обработчик заменяет href сценарием перенаправления в домене поисковой системы.

Таким образом, они по-прежнему отображают правильный URL-адрес вплоть до последнего возможного момента, но они по-прежнему используют перенаправляющий журнал посещений, даже когда вы открываете ссылку в новой вкладке.

Answer 6

Похоже, они прямо противоположны тому, что есть в вашем примере. Они имеют href = "ссылка" и событие onclick в качестве функции отслеживания.