¿Cómo reemplazan Google y Yahoo la URL en la barra de estado del navegador?

Question

En las páginas de búsqueda de Google y Yahoo, las URL de los 10 enlaces de resultados de búsqueda apuntan a google.com o yahoo.com. Las URL tienen argumentos adicionales que permiten a google.com o yahoo.com redirigir al resultado de búsqueda real cuando se hace clic en el enlace. Cuando el usuario pasa el mouse sobre el enlace, la URL del resultado de la búsqueda (y no la URL de google.com o yahoo.com) se muestra en la barra de estado del navegador.

Me pregunto cómo lo hacen. Hace

muchos años, esto hubiera sido posible gracias a que algunos javascript que establece window.status, pero eso no parece que trabajar más, como se explica por Reliable cross browser way of setting Status bar text

tengo un vínculo que tiene este aspecto : <a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar" onmouseover="window.status='http://niceShourtUrl.com/'" onmouseout="window.status=''">Click Me</a>

Este enlace intentó usar la estrategia window.status, pero no funciona. ¿Cómo arreglo este enlace para que actúe como los enlaces en las páginas de resultados de búsqueda de Google y Yahoo? En este ejemplo, quiero que se muestre "http://niceShourtUrl.com/" en la barra de estado cuando el usuario pasa el mouse sobre el enlace.

Answer 1

Es difícil leer la fuente, pero verá que las URL (en las etiquetas <a>) son las URL de destino correctas, por lo que la barra de estado del navegador muestra la URL correcta (en lugar del vínculo de seguimiento que te redirecciona cuando haces clic). Existe entonces un código JavaScript onclick que puede interceptar los clics antes de que la acción predeterminada del navegador (siguiendo el enlace) pueda tener lugar.

Answer 2

Creo que en realidad tienen el enlace completo en el href del enlace. PERO usan javascript para capturar el onclick y luego, cuando haces clic en el enlace, lo rutea a través de su sitio.

Answer 3

Por ejemplo el enlace a StackOverflow se ve realmente como esto:

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

Ahora la función de clic está en algún lugar dentro de ese código fuente minimizado. Aquí tienes el código con un poco de espacio adicional:

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

sin realmente mirarlo en detalle, la idea importante de todo es que se calcula alguna URL de Google, y establece this.href (= objetivo de la conexión del enlace!) A esa nueva url cuando haces clic en el enlace. Después de eso, el enlace se evalúa y el navegador lo envía a esa URL modificada a pesar de mostrar la URL del enlace original anteriormente.

Answer 4

Google tiene controladores onMouseDown en cada enlace que cambian el enlace de la fuente original apuntando hacia la redirección de Google. Entonces onmousedown reemplaza el enlace y cuando aparece onClick (poco después de la onmousedown) el enlace ya apunta a otro lugar que no sea la dirección original.

Paso 1. El usuario hace clic en un enlace (botón del ratón está presionado)

Paso 2. evento onMouseDown desencadena

Paso 3. destino del enlace (un valor href) se altera

Paso 4 El botón del mouse aparece

Paso 5.evento de clic desencadena

Paso 6. navegador ve que se ha hecho clic en un enlace y envía al usuario al destino deseado (establecido por un valor de href ya alterado)

Paso 7. navegador abre la página de Google redirigir hacia delante y esta el usuario al destino original

Actualizado: Google solía realizar un seguimiento de los clics solo en un evento onmousedown y no alteraba el destino del enlace. Cuando se presionó un botón del mouse en un enlace, se realizó una solicitud de carga de imágenes hacia los servidores de Google que contabilizaron el clic (onmousedown => new Image("coogle.counter.server.com/link=www.pressed.com")) pero supongo que se utilizó incorrectamente o no fue lo suficientemente confiable como para decidir utilizar la técnica actual de alteración de enlaces.

Answer 5

Es un proceso multiparte. Para una etiqueta dada <a>, el atributo href en el HTML apuntará a la página real. Esto permite que los navegadores sin JavaScript vayan al lugar correcto.

A continuación, hay un controlador de eventos mousedown en el enlace. El evento de mousedown se dispara al presionar un botón del mouse mientras se desplaza sobre el enlace. Este evento se dispara incluso si se presiona el botón derecho o central del mouse. El controlador reemplaza el href con el script de redireccionamiento en el dominio del motor de búsqueda.

De esta manera todavía muestran la URL correcta hasta el último momento posible, pero aún usan el registrador de hits de redireccionamiento, incluso cuando abre el enlace en una pestaña nueva.

Answer 6

Parece que hacen lo contrario de lo que tienes en tu ejemplo. Tienen href = "the link" y el evento onclick como función de seguimiento.