javascript - que - Deshabilitar el texto de la barra de estado del navegador
esconder la url de un enlace en la barra de estado (5)
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 destino del enlace en el desplazamiento / enfoque.
Un ejemplo de este comportamiento (no deseable, en mi caso) se ilustra en la siguiente captura de pantalla:
Preguntas
- ¿Hay alguna forma portátil de desactivar estas sugerencias de herramientas?
- ¿Me estoy perdiendo los inconvenientes obvios de hacer esto en mi situación particular?
- ¿Mi intento (ver abajo) es 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/# todas partes parece molesto y 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 de oficio, 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:[email protected]">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 un elemento span , hace que todos los enlaces "externos" se abran en una nueva pestaña / ventana y no parece romper el manejo del protocolo personalizado.
¿Hay alguna forma portátil de desactivar estas sugerencias de herramientas?
No, aparte de soluciones como su ejemplo anterior.
¿Me estoy perdiendo los inconvenientes obvios de hacer esto en mi situación particular?
Parece que te estás perdiendo el hecho de que toda la situación es incómoda. ¿Por qué tener enlaces si los va a hacer parecer botones? Solo usa los botones. Para el caso, ¿por qué molestarse con los enlaces si terminas apagándolos de todos modos? Solo usa tramos.
¿Mi intento (ver abajo) es una forma razonable de lograr esto?
No es realmente razonable como enfoque general, ya que está eliminando esos elementos de ancla del documento, por lo que se perderán los oyentes de eventos adjuntos, expandos, etc. Puede funcionar para su situación específica, pero un enfoque más sensato sería no usar enlaces en primer lugar (ver arriba).
Si aún está decidido a hacer algo como esto, al menos no reemplace el elemento a. Simplemente deshazte de su atributo href y configura un detector de eventos como lo hiciste en tu ejemplo. Ahora ya no es un enlace, por lo que no aparecerá en la barra de estado (pero sigue siendo el mismo elemento, al menos).
La información sobre herramientas proporciona una indicación al usuario donde un enlace los llevará si hace clic. Es parte de la experiencia de usuario estándar del navegador y será esperada por los usuarios de su sitio. Cambiar esta expectativa porque no crees que se vea bien probablemente genere una experiencia de usuario deficiente. Cualquier contenido mostrado en esa área será visible tan pronto como el usuario deje de pasar el mouse sobre una etiqueta de enlace.
Sé que cualquier enlace que no me diga dónde está me parece sospechoso.
prueba esto
$(this).removeAttr("href");
$(this).click(function(){}).mouseover(function(){.........}).etc
<button onclick="window.open(''yoururlhere.html'',''_self'')">your link text here</button>
Tenga en cuenta que esto trata ctrl-clics como clics normales y desactiva el clic derecho. No sé acerca de los clics del medio.
También podría usar "a" y simplemente reemplazar el href con el clic onclick como en el código anterior, pero cuando lo intenté, mi estilo "a: hover" dejó de funcionar. Aparentemente, una "a" sin un href se considera insoportable, al menos en Firefox. Así que cambié al estilo de "botón" y "botón: hover" y todo estaba bien.
Entiendo que esta solución se considerará una mala práctica, pero en algunas situaciones, por ejemplo, el sitio que estoy haciendo compuesto principalmente por fotos en pantalla completa, la estética triunfa sobre los principios.
Esto es lo que hago con jQuery:
//remove status bar notification...
$(''a[href]'').each(function(){
u = $(this).attr(''href'');
$(this).removeAttr(''href'').data(''href'',u).click(function(){
self.location.href=$(this).data(''href'');
});
});