CODEWITHSUNDEEP
javascriptfirefoxbrowser
Robin Rodricks
Robin Rodricks

Reputation: 113956

Possible to flash a Browser window using Javascript?

Like many programs flash their window on the taskbar / dock to alert the user to switch to the program,

Is it possible to flash the Browser window using Javascript? (FireFox-only scripts are also welcome)

This is useful for web-based Chat / Forum / Community-based software where there is lots of real-time activity.

Upvotes: 6

Views: 13978

Answers (5)

Robin Rodricks
Robin Rodricks

Reputation: 113956

Mozilla previously had Window.getAttention() but by 2018 no browsers were listed supporting it. https://web.archive.org/https://developer.mozilla.org/en-US/docs/Web/API/Window/getAttention

Its behavior:

  • Windows, the taskbar button for the window flashes
  • Linux, some window managers flash the taskbar button, others focus the window immediately
  • Macintosh, the icon in the upper right corner of the desktop flashes

Upvotes: 1

fearphage
fearphage

Reputation: 16918

@Hexagon Theory: Why would you ever rewrite the whole head element just to change the value of one element in the head? Your solution is horribly inefficient on multiple levels.

<html>
<head>
<link rel="icon" href="on.png" type="image/png" id="changeMe" />
<script type="text/javascript" src="flash.js"></script>
</head>
<body>
</body>
</html>

flash.js:

function Flasher(speed) {
  var elem = document.getElementById('changeMe');

  this.timer = setTimeout(function() {
    elem.href = elem.href ==  'on.png' ? 'off.png' : 'on.png';
  }, speed);

  this.stop = function() { clearTimeout(this.timer); }
}

/* sample usage
 *
 * var flasher = new Flasher(1000);
 * flasher.stop();
 */

It didn't really have to be a class but it helped keep the global namespace clean. That's untested but if simply changing the href doesn't work for some reason, clone the link node, change the href and replace the old link with the cloned one.

Upvotes: 4

Hexagon Theory
Hexagon Theory

Reputation: 44803

Hey, another interesting solution to this question hit me just now. Why not really grab the user's attention by making the icon flash in their browser? You could, for example, make two icons (on.png and off.png in my example below) and repeatedly swap them out to really catch a user's eye. The following is a bare-bones implementation; do keep in mind that you will need to reference this script remotely or put it in the body of the page because it uses a method that repeatedly replaces the content of the <head> tag. Give it a try, though; I rather like the simplicity of it.

page.html:

<html>
<head>
<link rel="icon" href="on.png" type="image/png" />
<script type="text/javascript" src="flash.js"></script>
</head>
<body>
</body>
</html>

flash.js:

var timer, speed = 175;
function flash()
 {
head_html = document.getElementsByTagName('head')[0].innerHTML;
if (head_html.indexOf('href="on.png"') != -1)
document.getElementsByTagName('head')[0].innerHTML = head_html.replace('on.png', 'off.png');
else
document.getElementsByTagName('head')[0].innerHTML = head_html.replace('off.png', 'on.png');
timer = setTimeout('flash()', speed);
 }

function kill_flash() {clearTimeout(timer);}

flash();

Upvotes: 2

Hexagon Theory
Hexagon Theory

Reputation: 44803

At this point, it seems only causing an alert dialog to pop up does the trick... this seems a bit too intrusive, I feel, particularly given the use you're trying to put it to. Instead of causing it to flash, though, you could modify document.title to grab the user's attention, either by prepending some signal (perhaps the string "NEW!") to the site's name, and then using an interval to constantly change it to "", which would then give a nice little "flashing" illusion.

Bare-bones example:

<html>
<head>
<title>Chat System</title>
<script>
var timer, old_t = document.title, blink_amount = 5, cur_b = 0;
function notify()
 {
cur_b = 0;
timer = setInterval(function()
 {
if (cur_b < blink_amount * 2)
 {
cur_b++;
document.title = (document.title.indexOf('NEW! ') != -1) ? old_t : 'NEW! ' + old_t;
 }
else
 {
clearInterval(timer);
 }
 }, 600);
 }

notify();

// From here, it's just a matter of calling the
// notify() function whenever you detect a new message.
</script>
</head>
<body>
</body>
</html>

Upvotes: 4

Steven Robbins
Steven Robbins

Reputation: 26599

Window.Focus() should do it on Windows, not sure on other platforms though. You might find it brings the Window to the foreground if it's minimised though, which would be very annoying :)

Upvotes: 0

Related Questions