How to display text in the browser status bar?

Question

How can we change the text displayed in the browser status bar using JavaScript (or jQuery)?

Answer 1

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:

Hover this link (do not click) and observe the browser's status bar.

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:

1. (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.)

2. (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.)

3. (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)

4. (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)

5. (Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)

6. (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)

7. (Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)

8. (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)

9. (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)

10. (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)

11. (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)

12. Repeat all of the test strings above, with http:// replaced by https://, 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:

this link will not load

or:

this link will not load

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)

same tab

new tab

Or using return func(): (online test)

same tab 2

new tab 2

Or inline with setTimeout: (online test)

same tab 3

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) 

Or using return func() with setTimeout: (online test)

same tab 4

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) 

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.