Wie kann man den in der Statusleiste des Browsers angezeigten Text mit JavaScript (oder jQuery) ändern?
Antworten
Zu viele Anzeigen?Dies kann wie folgt geschehen . Wenn Sie mit dem Mauszeiger über einen Google-Link fahren, wird in der Statusleiste die zugrunde liegende Website angezeigt:
Wenn Sie jedoch darauf klicken, werden Sie zu einer orts- und benutzeragentenabhängigen URL weitergeleitet, die wie folgt aussieht https://www.google.com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC8QFjAAahUKEwi4lP-Z4_rIAhVLk5QKHXRLAe8&url=https%3A%2F%2Fwww.example.com%2F&usg=AFQjCNFEbIRqDC65KFpmuak0aXKmnzjKVQ&bvm=bv.106923889,d.dGo
. Die URL führt Google-Tracking und ähnliches durch, bevor sie Sie zu https://www.example.com
. Sie können dies ganz einfach mit Network Inspector testen, indem Sie " Protokoll bewahren ".
Sie verwenden eine Hackebeil aber es funktioniert in allen Browsern .
Der Trick ist zu erkennen, dass wir die Statusleiste auf fast alles setzen können, indem wir nur die HTLM a href
(weder CSS noch JavaScript erforderlich). Alles, was wir brauchen, ist, den Parser des Browsers auszutricksen, damit er denkt, dass die href
Wert eine gültige URL ist, wird diese angezeigt.
Versuchen Sie, diesen Ausschnitt auszuführen:
<a href="http://.# this is powerful because (|||) symbols !@)(*#&$^%</even htlm> or lorem ipsum in all scripts Lorem Forsíða Lorem lorem ipsum ">Hover this link (do not click) and observe the browser's status bar.</a>
Die Ausgabe von Chrome (zum Vergrößern auf das Bild klicken): (v46.0.2490.80 m)
Die Ausgabe von FireFox: (v42.0)
IE's Ausgabe: (v11.0.9600.17905 Update-Versionen 11.0.21 (KB3065822))
Die Ausgabe von Opera: (v33.0.1990.58 stabil)
Die Ausgabe von Seamonkey: (v2.38)
Die Leistung von Avant: (v Ultimate 2015 build 28)
Die Leistung der Fackel: (v42.0.0.10546)
Baidu's Ausgabe: (v43.19.1000.119)
Die Ausgabe von Maxthon: (v4.4.8.1000)
Außerdem ist es nicht notwendig, die #
(die Fragment-Bezeichner ). Die Browser betrachten einen Text wie http://some.message.here./and_more_message_here
auch als gültige Url. Seltsamere Zeichenfolgen können je nach Browser als gültig betrachtet werden:
-
<a href="http://a.b.c.d/test_symbols_!#$%^&*()[]{};:'".><,//=+``~">
(Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox).
(Die Namen sind für Browser mit erwarteter Ausgabe aufgeführt, die Namen sind durchgestrichen ("
Beispiel") bei Browsern ohne Statusleistenausgabe und unterstrichene Namen ("Beispiel") bei Browsern mit unerwarteter Ausgabe/Verhalten. Getestet mit den gleichen Browserversionen wie die oben aufgeführten). -
<a href="http://a.b.c.d/test some spaces">
(Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome, Avant Firefox).
-
<a href="http://test some . spaces in domain part/a_b_c_d_e">
(Chrom,
FireFox, IE,SM, Torch, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome,Avant Firefox) -
<a href="http://test some . spaces in domain part without slash">
(Chrom,
FireFox, IE,SM, Torch, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome,Avant Firefox) -
<a href="http://test_without_slash_and_dots">
(Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)
-
<a href="http://a.b.c:port_with_letters_test">
(
Chrom,FireFox,IE,SM,Fackel,Baidu,Maxthon,Avant IE11, Avant IE Kompat,Avant Chrom,Avant Firefox) -
<a href="http://http://double.http.test">
(Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)
-
<a href="http://test @ with spaces">
(Chrom,
FireFox,IE,SM, Torch, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome,Avant Firefox) -
<a href="http://test:password@ with spaces/">
(Chrom,
FireFox,IE,SM, Torch, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome,Avant Firefox) -
<a href="http:// test : password @with.spaces/">
(Chrome, FireFox,
IESM, Torch, Baidu, Maxthon, Avant IE 11, Avant E Compat, Avant Chrome, Avant Firefox) -
<a href="http://test@double@a.b.c.d">
(Chrome, FireFox,
IESM, Torch, Baidu, Maxthon, Avant IE 11, Avant IE Compat, Avant Chrome, Avant Firefox) -
Wiederholen Sie alle oben genannten Teststrings, mit
http://
ersetzt durchhttps://
,ftp://
,about://
,chrome://
,file://
,foobar://
, und usw.
Wenn der Browser die Zeichenkette nicht als gültige URL ansieht, wird keine Statusleiste angezeigt, es ist also nichts passiert. (Außer, dass es so aussieht, als ob Avant IE Compat mit dem Teststring ein paar Fehler hat "http://a.b.c:port_with_letters_test"
.)
Die Statusleiste des Browsers dazu zu bringen, die gewünschte Zeichenfolge anzuzeigen, ist nur der erste Schritt. Der zweite Schritt besteht darin, den Browser davon abzuhalten, die Seite zu laden, wenn der Benutzer auf den Link klickt.
Dies kann ganz einfach geschehen durch return false
:
<a onclick="return false" href="http://some.message.here./and_more_message_here">this link will not load</a>
oder:
<a onclick="return f()" href="http://some.message.here./and_more_message_here">this link will not load</a>
<script>
function f() {
return false;
}
</script>
Die beiden obigen Schnipsel wurden auf Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox getestet.
Der letzte Schritt ist die Verwendung von window.location
o window.open
zur Nachahmung des Verhaltens von a href
. Sie kann inline erfolgen: ( Online-Test )
<!doctype html>
<a onclick="location='http://example.org'; return false" href="https://some.message.here./and_more_message_here">same tab</a>
<br><a onclick="window.open('http://example.org'); return false" href="https://some.message.here./and_more_message_here">new tab</a>
Oder mit return func()
: ( Online-Test )
<!doctype html>
<a onclick="return f1()" href="http://some.message.here./and_more_message_here">same tab 2</a>
<br><a onclick="return f2()" href="http://some.message.here./and_more_message_here">new tab 2</a>
<script>
function f1() {
location = 'http://example.org';
return false;
}
function f2() {
open('http://example.org');
return false;
}
</script>
Oder inline mit setTimeout
: ( Online-Test )
<!doctype html>
<a onclick="setTimeout(function(){location='http://example.org';},1); return false" href="https://some.message.here./and_more_message_here">same tab 3</a>
<br><a onclick="setTimeout(function(){window.open('http://example.org');},1); return false" href="http://some.message.here./and_more_message_here">new tab 3 (doesn't work on Avant IE11 and Avant IE Compat if this link is HTTP; works if it is HTTPS or FTP)</a>
Oder mit return func()
con setTimeout
: ( Online-Test )
<!doctype html>
<a onclick="return f1()" href="http://some.message.here./and_more_message_here">same tab 4</a>
<br><a onclick="return f2()" href="http://some.message.here./and_more_message_here">new tab 4 (doesn't work on Avant IE11 and Avant IE Compat if this link is HTTP; works if it is HTTPS or FTP)</a> <!-- hadn't tested this with sourcepage=HTTP. only tested with sourcepage=HTTPS and sourcepage=localwebpage -->
<script>
function f1() {
setTimeout(function() {
location = 'http://example.org';
}, 1);
return false;
}
function f2() {
setTimeout(function() {
open('http://example.org');
}, 1);
return false;
}
</script>
Die beiden obigen Schnipsel funktionieren auch auf Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11 (mit einem im Code angegebenen Vorbehalt), Avant IE Compat (mit einem im Code angegebenen Vorbehalt), Avant Chrome, Avant Firefox.
Für alle, die es betrifft, eine einfache Anmerkung spezifisch für IE :
Bis zum IE6 und einschließlich diesem könnten Sie tun:
window.status = "Hello, I'm a custom status bar note.";
Aber nach IE6 (getestet IE7/8) Sie tun es auf dieselbe Weise, aber müssen Sie auch die Sicherheitsoptionen des Browsers anpassen indem Sie die Funktion einschalten: Extras - Internetoptionen - Sicherheit - Stufe anpassen:
Erstens ist das Erscheinungsbild nicht in allen Browsern einheitlich, und zweitens ist die Funktionalität wurde deaktiviert seit langem standardmäßig bei den meisten Browsern aus Sicherheitsgründen.
Wie auch immer, das Javascript dafür ist ein einfaches window.status = "my text"
- See previous answers
- Weitere Antworten anzeigen