Wyłączanie tekstu paska stanu przeglądarki

Question

May 06, 2012, 06:21 AM

suppress html5 cross-browser statusbar javascript

Wyłączanie tekstu paska stanu przeglądarki

tło

Nowoczesne przeglądarki eliminują klasyczny pasek stanu i zamiast tego rysują małą podpowiedź na dole okien, która wyświetla cel odsyłacza na kursie / fokusie.

Przykład tego (niepożądanego, w moim przypadku) zachowania ilustruje poniższy zrzut ekranu:

pytaniaCzy istnieje przenośny sposób na wyłączenie tych podpowiedzi?Czy brakuje mi jakichkolwiek oczywistych wad w tej konkretnej sytuacji?Czy moja próba (patrz poniżej) jest rozsądnym sposobem osiągnięcia tego celu?Rozumowanie

Pracuję nad intranetową aplikacją internetową i chciałbym wyłączyć to zachowanie dla niektórych działań specyficznych dla aplikacji, ponieważ szczerze mówiąc,https://server/# wszędzie wygląda jak obolały wzrok i jest natrętny, ponieważ w niektórych przypadkach moja aplikacja rysuje własny pasek stanu w tej lokalizacji.

Moja próba

Nie jestem programistą z branży internetowej, więc moja wiedza jest wciąż dość ograniczona w tej dziedzinie.

Tak czy inaczej, oto moja próba z jQuery:

<code><!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:[email protected]">Email Support</a></li>
    </ol>
  </body>
</html>
</code>

patch() zastępuje wszystkie linki zawierające# (tj. w moim przypadku działania specyficzne dla aplikacji) za pomocąspan element, powoduje, że wszystkie „zewnętrzne” linki otwierają się w nowej karcie / oknie i nie wydają się przerywać obsługi niestandardowego protokołu.