Search code examples
javascriptonclickpage-title

How to detect when a user clicks on a webpage tab?

Today I discovered that youtube has this cool feature that when a video is running and you click on the tab of the webpage you can mute the video. Then when you click again, the video returns to its original volume.

I have tried my best to explain better in this image

THE IMAGR

I was excited to know the the title of a webpage could detect clicks and I tried the following code.

document.getElementsByTagName("title")[0].addEventListener("click", function() {
    alert("foo");
});

Didn't work. So I tried putting a button in the title like below.

<title><button>test</button></title>
...
...
...
document.getElementsByTagName("button")[0].addEventListener("click", function() {
    alert("foo");
});

Didn't work. I have tried to find out through google but every post is about detecting whether the webpage is focused or not or maybe I just can't figure out the correct keywords (to google).

I really wan't to figure this out, so any help is much appreciated. I am using the latest version of Firefox (in case thats relevant).

Thanks in advance.

Solution

  • Unfortunately, it's not something that is achievable with javascript. It's a feature implemented by recent browsers like Chrome or Firefox. For instance, in IE the mute icon is not visible. Any webpage that emit sound will have this icon.