run an event only when a tab is activated

Question

I want to do something when a tab is activated

onvisibilitychange fires when a page is activated and de-activated

I need only the first option, something like:

document.onactivate = function(){ 
  console.log("index.php is visible");
};

Any help?

Answer 1

You can check the visibilityState of the document. The event will fire when the page is activated and de-activated, however, this allows you to run code only when the page becomes activated ie: visible.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // code when page is visible
    console.log("index.php is visible");
  }
});

Answer 2

Use condition to check visible

document.addEventListener("visibilitychange", function handleVisibilityChange() {
  if (!document.hidden) {
    console.log("index.php is visible");
  }
}, false);