bootstrap - progress bar javascript html

¿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 hace clic en 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 se habría logrado al tener un javascript que configuraba window.status, pero parece que ya no funciona, como lo explica la forma confiable en todos los navegadores para configurar el texto de la barra de estado

Tengo un enlace que se ve así: <a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar" onmouseover="window.status=''http://niceShourtUrl.com/''" onmouseout="window.status=''''">Click Me</a>

Este enlace intentó utilizar 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 haga clic en el enlace.

Answer 1

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

Answer 2

Es difícil leer la fuente, pero verá que, de hecho, 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 enlace de seguimiento que redirige). a través de cuando realmente hace clic). Luego hay algunos JavaScript de clic que pueden interceptar los clics antes de que se realice la acción predeterminada del navegador (siguiendo el enlace).

Answer 3

Es un proceso multiparte. Para una etiqueta <a> dada, 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 de mousedown en el enlace. El evento mousedown se dispara cuando se presiona 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 redirección en el dominio del motor de búsqueda.

De esa manera, siguen mostrando la URL correcta hasta el último momento posible, pero siguen usando el registrador de visitas de redireccionamiento, incluso cuando abres el enlace en una nueva pestaña.

Answer 4

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

Paso 1. El usuario hace clic en un enlace (el botón del mouse está abajo)

Paso 2. Activadores de eventos onMouseDown

Paso 3. Se modifica el enlace objetivo (un valor href)

Paso 4. Aparece el botón del ratón.

Paso 5. Activar eventos onClick

Paso 6. El navegador ve que se hizo clic en un enlace y envía al usuario al destino deseado (establecido por un valor href ya modificado)

Paso 7. El navegador abre una página de redireccionamiento de Google y esto envía al usuario al destino original

Actualizado: Google solía rastrear clics solo en un evento onmousedown y no modificó el destino del enlace. Cuando se presionó un botón del mouse en un enlace, se realizó una solicitud de carga de imagen hacia los servidores de Google que contaron el clic ( onmousedown => new Image("coogle.counter.server.com/link=www.pressed.com") ) pero Supongo que se usó mal o no fue lo suficientemente confiable como para que decidieran usar la técnica actual de modificación de vínculos.

Answer 5

Parece que hacen lo opuesto a lo que tienes en tu ejemplo. Tienen el href = "el enlace" y el evento onclick como la función de seguimiento.

Answer 6

Por ejemplo, el enlace a se ve así:

<a onmousedown="return clk(this.href,'''','''',''res'',''1'','''',''0CBwQFjAA'')" class="l" href="http://.com/"><em></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 algunos espacios en blanco adicionales:

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 verlo en detalle, la idea importante de esto es que calcula un poco de URL de Google y establece este. this.href (= el objetivo del enlace del enlace!) A ese nuevo URL al hacer clic en el enlace. Después de eso, el enlace se evalúa y el navegador te envía a esa url modificada a pesar de mostrar la url original del enlace anteriormente.