How to display text in the browser status bar?
How can we change the text displayed in the browser status bar using JavaScript (or jQuery)?
Answer
This can be done. Google Search is doing it, which can be seen when you hover over a Google link, the status bar shows the underlying site:
Yet when you click it, it brings you to a location and user-agent dependent url that looks like 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. The url does Google tracking and whatnot before redirecting you to https://www.example.com. You can easily test this using Network Inspector with "preserve log".
They're using a hacky hack but it works across all browsers.
The trick is to realize that we can set the status bar to almost anything using only HTLM's a href (no CSS nor JavaScript needed). All we need is to trick the browser's parser into thinking that the href value is a valid url and it will display it.
Try running this snippet:
<a href="http://.# this is p̴̵̶͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔̖͕͓̖̱̲̳̖̖̖̖̖̖̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̑̒̓̔̐̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̓̓̓̓̓̓̑̒̓̔̕̚̕̚̕̚̕̚̕̚̕̚̕̚̕̚̕̚͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜͜owerful 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>Chrome's output (click image to maximize): (v46.0.2490.80 m)
FireFox's output: (v42.0)
IE's output: (v11.0.9600.17905 Update Versions 11.0.21 (KB3065822))
Opera's output: (v33.0.1990.58 stable)
Seamonkey's output: (v2.38)
Avant's output: (v Ultimate 2015 build 28)
IE 11 engine:
IE compatible engine:
Chrome engine:
FireFox engine:
Torch's output: (v42.0.0.10546)
Baidu's output: (v43.19.1000.119)
Maxthon's output: (v4.4.8.1000)
Also, it's not necessary to use # (the fragment identifier). Browsers will consider a text like http://some.message.here./and_more_message_here as a valid url too. Weirder strings might be considered valid depending on the browser:
<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.)
(Names are listed for browsers with expected output, names are striked ("
example") for browsers with no status bar output, and names are underlined ("e̲x̲a̲m̲p̲l̲e̲") for browsers with unexpected output/behavior. Tested with browser versions same as the ones listed above.)<a href="http://a.b.c.d/test some spaces">(Chrome, FireFox, I̲E̲, SM, Torch, B̲a̲i̲d̲u̲, M̲a̲x̲t̲h̲o̲n̲, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, Avant Chrome, Avant Firefox.)
<a href="http://test some . spaces in domain part/a_b_c_d_e">(C̲h̲r̲o̲m̲e̲,
FireFox, I̲E̲,SM, T̲o̲r̲c̲h̲, B̲a̲i̲d̲u̲, M̲a̲x̲t̲h̲o̲n̲, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲,Avant Firefox)<a href="http://test some . spaces in domain part without slash">(C̲h̲r̲o̲m̲e̲,
FireFox, I̲E̲,SM, T̲o̲r̲c̲h̲, B̲a̲i̲d̲u̲, M̲a̲x̲t̲h̲o̲n̲, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲,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">(
Chrome,FireFox,IE,SM,Torch,Baidu,Maxthon,Avant IE11, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲,Avant Chrome,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">(C̲h̲r̲o̲m̲e̲,
FireFox,IE,SM, T̲o̲r̲c̲h̲, B̲a̲i̲d̲u̲, M̲a̲x̲t̲h̲o̲n̲, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲,Avant Firefox)<a href="http://test:password@ with spaces/">(C̲h̲r̲o̲m̲e̲,
FireFox,IE,SM, T̲o̲r̲c̲h̲, B̲a̲i̲d̲u̲, M̲a̲x̲t̲h̲o̲n̲, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲,Avant Firefox)<a href="http:// test : password @with.spaces/">(C̲h̲r̲o̲m̲e̲, FireFox,
IE, SM, T̲o̲r̲c̲h̲, B̲a̲i̲d̲u̲, M̲a̲x̲t̲h̲o̲n̲, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲, Avant Firefox)<a href="http://test@[email protected]">(C̲h̲r̲o̲m̲e̲, FireFox,
IE, SM, T̲o̲r̲c̲h̲, B̲a̲i̲d̲u̲, Maxthon, A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲, A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲, Avant Firefox)Repeat all of the test strings above, with
http://replaced byhttps://,ftp://,about://,chrome://,file://,foobar://, and etc.
We can see that if the browser doesn't consider the string to be a valid url, it will fail gracefully by displaying no status bar, so no harm done. (Except that it looks like there's some bugs going on for Avant IE Compat with the test string "http://a.b.c:port_with_letters_test".)
Getting the browser status bar to display our desired string is only the first step. The second step is to stop the browser from loading the page when the user clicks the link.
This can easily be done using return false:
<a onclick="return false" href="http://some.message.here./and_more_message_here">this link will not load</a>or:
<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>Above two snippets are tested to work on Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox.
The last step is to use window.location or window.open to mimic the behavior of a href. It can be done inline: (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>
Or using 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>
Or inline with 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>
Or using return func() with 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>
Above two snippets are also tested to work on Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11 (with caveat stated in the code), Avant IE Compat (with caveat stated in the code), Avant Chrome, Avant Firefox.