Как Google и Yahoo заменяют URL-адрес в строке состояния браузера?
на страницах поиска Google и Yahoo URL-адреса 10 ссылок результатов поиска фактически указывают на google.com или yahoo.com - ... URL-адреса имеют дополнительные аргументы, которые позволяют google.com или yahoo.com для перенаправления на фактический результат поиска при нажатии на ссылку. Когда пользователь наводит курсор на ссылку, URL-адрес результата поиска (а не google.com или yahoo.com URL) отображается в строке состояния браузера.
Мне интересно, как они это делают.
много лет назад, этот было бы достигнуто, имея некоторый javascript, который устанавливает окно.статус, но это, похоже, больше не работает, как объясняется надежный кросс-браузер способ установки текста строки состояния
У меня есть ссылка, которая выглядит как эта:
<a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar" onmouseover="window.status='http://niceShourtUrl.com/'" onmouseout="window.status=''">Click Me</a>
эта ссылка пыталась использовать окно.стратегия статуса, но она не работает. Как исправить эту ссылку, чтобы она действовала как ссылки на страницах результатов поиска Google и Yahoo? В этом примере я хочу "http://niceShourtUrl.com/ " будет отображаться в строке состояния, когда пользователь наведет курсор мыши на ссылку.
6 ответов
трудно прочитать источник, но вы увидите, что на самом деле URL-адреса (в <a>
теги) являются правильными URL-адресами назначения, поэтому в строке состояния браузера отображается правильный URL-адрес (вместо ссылки отслеживания, которую он перенаправляет, когда вы фактически нажимаете). Есть тогда некоторые onclick
JavaScript, который затем может перехватывать клики до действия браузера по умолчанию (по ссылке) может иметь место.
Я думаю, что у них действительно есть полная ссылка в href
ссылка. Но они используют javascript, чтобы поймать onclick
и затем, когда вы нажимаете ссылку, она проходит через их сайт.
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")
) но я думаю, что это было неправильно или недостаточно надежно, что они решили использовать текущую технику изменения ссылок.
например, ссылка на 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
};
не рассматривая его подробно, важная идея заключается в том, что он вычисляет url-адрес google и устанавливает this.href
(=цель ссылки ссылки!) к этому новому url-адресу при нажатии на ссылку. После этого ссылка затем оценивается и браузер отправляет вас на этот измененный url, несмотря на показ исходного url-адреса ссылки раньше.
это составной процесс. Для данного <a>
тега href
атрибут в HTML будет указывать на фактическую страницу. Это позволяет браузерам без JavaScript идти в нужное место.
далее mousedown
обработчик событий по ссылке. Событие mousedown вызывается при нажатии кнопки мыши при наведении его на ссылку. Это событие срабатывает, даже если нажата правая или средняя кнопка мыши. Обработчик заменяет href
со сценарием перенаправления в домен поисковой системы.
таким образом, они по-прежнему отображают правильный URL-адрес до последнего возможного момента, но они по-прежнему используют перенаправление Hit logger, даже когда вы открываете ссылку на новой вкладке.
похоже, они делают прямо противоположное тому, что у вас есть в вашем примере. У них есть href="ссылка" и событие onclick в качестве функции отслеживания.