Deshabilitando el texto de la barra de estado del navegador

Question

May 06, 2012, 06:21 AM

statusbar html5 cross-browser javascript suppress

Deshabilitando el texto de la barra de estado del navegador

Fondo

Los navegadores modernos eliminan la barra de estado clásica y, en su lugar, dibujan una pequeña información sobre herramientas en la parte inferior de sus ventanas que muestra el objetivo del enlace al desplazarse / enfocar.

Un ejemplo de este comportamiento (indeseable, en mi caso) se ilustra en la siguiente captura de pantalla:

Preguntas¿Hay una manera portátil para deshabilitar estas informaciones sobre herramientas?¿Me falta algún inconveniente obvio para hacer esto en mi situación particular?¿Es mi intento (ver más abajo) una forma razonable de lograr esto?Razonamiento

Estoy trabajando en una aplicación web de intranet y me gustaría deshabilitar este comportamiento para algunas acciones específicas de la aplicación porque, francamente,https://server/# En todas partes parece un dolor de ojo y es molesto, ya que en algunos casos mi aplicación dibuja su propia barra de estado en esa ubicación.

Mi intento

No soy un desarrollador web por comercio, por lo que mi conocimiento todavía es bastante limitado en este dominio.

De todos modos, aquí está mi intento con jQuery:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Target Tooltip Test</title>
    <style>
      a, span.a {
        color: #F00;
        cursor: pointer;
        text-decoration: none;
      }

      a:hover, span.a:hover {
        color: #00F;
      }

      a:focus, span.a:focus {
        color: #00F;
        outline: 1px dotted;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
      $(document).ready(function() {
        patch();
      });

      function patch() {
        $('a').each(function() {
          var $this = $(this).prop('tabindex', 0);

          if($this.prop('href').indexOf('#') == -1 || $this.prop('rel').toLowerCase() == 'external') {
            return;
          }

          var $span = $('<span class="a" tabindex="0"></span>');

          $span.prop('data-href', $this.prop('href'));
          $span.text($this.text());

          $this.replaceWith($span);
        });

        $('a[rel="external"]').click(function() {
          window.open($(this).prop('data-href'));
          return false;
        });

        $('span.a').click(function() {
          location.href = $(this).prop('data-href');
        }).keypress(function(event) {
          if(event.keyCode == 13) {
            location.href = $(event.target).prop('data-href');
          }
        }).focus(function() {
          window.status = ''; // IE9 fix.
        });
      }
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://google.com" rel="external">External Link</a></li>
      <li><a href="#foo">Action Foo</a></li>
      <li><a href="#bar">Action Bar</a></li>
      <li><a href="#baz">Action Baz</a></li>
      <li><a href="mailto:support@example.org">Email Support</a></li>
    </ol>
  </body>
</html>

patch() reemplaza todos los enlaces que contienen# (es decir, acciones específicas de la aplicación en mi caso) con unspan element, hace que todos los enlaces "externos" se abran en una nueva pestaña / ventana y no parece interrumpir el manejo del protocolo personalizado.

Deja tu comentario