Deaktivieren des Textes in der Browser-Statusleiste
Moderne Browser verzichten auf die klassische Statusleiste und zeichnen stattdessen einen kleinen Tooltip am unteren Rand ihres Fensters, der das Verknüpfungsziel beim Hover / Focus anzeigt.
Ein Beispiel für dieses (in meinem Fall unerwünschte) Verhalten ist im folgenden Screenshot dargestellt:
Ich arbeite an einer Intranet-Webanwendung und möchte dieses Verhalten für einige anwendungsspezifische Aktionen deaktivieren, dahttps://server/# Überall sieht es aus wie eine Augenweide und ist aufdringlich, da meine Anwendung in einigen Fällen an dieser Stelle eine eigene Statusleiste zeichnet.
Ich bin kein professioneller Webentwickler, daher sind meine Kenntnisse in diesem Bereich immer noch eher begrenzt.
Wie auch immer, hier ist mein Versuch mit 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() Ersetzt alle Links mit# (d. h. anwendungsspezifische Aktionen in meinem Fall) mit aspan Element, öffnet alle "externen" Links in einem neuen Tab / Fenster und scheint die Behandlung von benutzerdefinierten Protokollen nicht zu stören.