Morton 19 de agosto de 2012 a las 08.22
   Imprimir artículo
elWebmaster.com

JavaScript: Cómo crear un botón de emergencia y no dejar registro en el historial


javascriptwide2Imaginemos este escenario: a un dise√Īador encargado del sitio web de un programa de concientizaci√≥n sobre la violencia dom√©stica, se le solicita que los visitantes puedan esconder la ventana de su navegador antes de ser atrapados visitando el sitio. ¬ŅC√≥mo podemos lograr algo as√≠? Existe un m√©todo muy efectivo.

Haz clic aquí para ver una demostración >>

A todos nos ha sucedido que al acercarnos a alguien, esta persona cierra repentinamente una ventana de su navegador. Incluso si se trata de una coincidencia, siempre se ver√° sospechoso. Una acci√≥n mucho m√°s simple y menos sospechosa ser√≠a redirigir la p√°gina a algo mucho m√°s general y¬† benigno, como alg√ļn sitio popular de clima.

  1. <button onclick="window.location = 'http://weather.com';">Go</button>

Pero podemos hacerlo mejor. ¬ŅQu√© tal si la persona sospecha del cambio repentino de sitio web que ha realizado la v√≠ctima, y decide forzarla a hacer clic en el bot√≥n de Atr√°s para ver qu√© es lo que estaba viendo? Para evitar eso, debemos abrir el nuevo enlace en una pesta√Īa nueva, de ser posible, para evitar el historial directo.

Si empezamos a abstraer el JavaScript del botón mismo, nos quedará:

  1. <button id="get-away">Go</button> $("#get-away").on("click", function() { window.open("http://weather.com", "_newtab"); });

La nueva pesta√Īa no tendr√° historial directo, as√≠ que presionar el bot√≥n Atr√°s no ir√° a ninguna parte. Eso es bueno, pero abrir una nueva pesta√Īa se ver√° algo diferente que s√≥lo cambiar p√°ginas. Si la persona sospecha, quiz√°s con tan s√≥lo hacer clic en la pesta√Īa anterior ver√° lo que hab√≠a all√≠. Podemos intentar proteger a la v√≠ctima de esto cambiando adem√°s, la ubicaci√≥n de la p√°gina original:

  1. $("#get-away").on("click", function() { window.open("http://weather.com", "_newtab"); window.location.replace('http://google.com'); });

Al reemplazar la URL de la p√°gina original, no a√Īadir√° un nuevo item al historial. As√≠ que el bot√≥n Atr√°s no ir√° a la √ļltima p√°gina visitada, pero s√≠ a la ante√ļltima y a las anteriores. Por eso es importante que tu sitio no contenga m√°s de una p√°gina, o que utilices alg√ļn m√©todo como Ajax para que todo lo que se cargue quede en la misma p√°gina. De todas formas, es importante que sepas que al d√≠a de hoy, no existe una manera de limpiar totalmente el historial a trav√©s de JavaScript.

Algo a tener en cuenta, es que este famoso bot√≥n de escape debe ser algo imperdible a la vista, y que nos bloquee el reflejo de hacer clic en el bot√≥n Cerrar que la misma ventana incorpora. Para eso, debemos dise√Īar sabiamente, y el mejor es ir por lo grande, obvio y persistente.

Es barra verde tendrá una posición fija, y con ancho completo. Así que se quedará allí en el fondo de la página sin importar qué suceda. El texto debe ser algo claro, simple, descriptivo y a la vez, poco sospechoso. El color verde disimula porque no es un indicador de peligro.

De todas formas, acceder a este botón con el mouse puede ser inoportuno, y aquí las milésimas de segundos cuentan, por lo que proveeremos un atajo de teclado que hará las veces de hacer clic en el botón. La tecla de ESC se ve como la más apropiada.

Dado que debemos disparar acciones similares de dos maneras distintas (presionando la tecla, o haciendo clic) es tiempo de abstraer la funcionalidad en una función que nos evite repetirnos a nosotros mismos.

  1. function getAway() {
  2.     window.open("http://weather.com", "_newtab");
  3.     window.location.replace('http://google.com');
  4. }
  5.  
  6. $(function() {
  7.  
  8.   $("#get-away").on("click", function(e) {
  9.     getAway();
  10.   });
  11.  
  12.   $("#get-away a").on("click", function(e) {
  13.     e.stopPropagation();
  14.   });
  15.  
  16.   $(document).keyup(function(e) {
  17.     if (e.keyCode == 27) {
  18.       getAway();
  19.     }
  20.   });
  21.  
  22. });

La nueva tecla ESC trabaja id√©nticamente en Chrome y Opera. En Safari una nueva pesta√Īa se abre y reemplaza a la anterior pero la nueva pesta√Īa est√° vac√≠a, ya que aparentemente en este navegador no puedes abrir una nueva ventana con una ubicaci√≥n presionando una tecla. Firefox reemplazar√° la p√°gina inmediatamente pero bloquear√° la pesta√Īa emergente por defecto a menos de que explicitamente lo permitas.

Haz clic aquí para ver una demostración >>

Fuente original del artículo: CSS-Tricks
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Carlos Z√ļ√Īiga dice:

    Wooow!! que genial hahahah
    Eso me gusta aunque no tengo nada que ocultar hehe
    pero se ve bastante util, Gracias!!

  2. Leandro Aude dice:

    Ideal para los que vemos…ejem…perd√≥n, “ven” pornograf√≠a en lugares prohibidos ūüėČ

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder