How to change tab name in browser when user goes off from my site

Question

So I am making a website and everything is nicely done but I don't know that many things with javascript.

I was searching for something that will help me with this and found some similar things but it doesn't work in my case.

This is the problem/idea:

• User is on my site and the page name is eg. Hello ( tag) Then the user clicks on the other tab in the browser but doesn't close my website. When that happens my page title changes to eg. You went ? When he clicks on my tab again title changes back to default one.

So if someone can help me with the code and explain it a little bit.

Thank you.

Answer 1

You need to make use of the onblur and onfocus events for the window object.

So something like this (this is native javascript, no jquery).

<script>

window.onblur = function () { document.title = 'you went?'; }

window.onfocus = function () { document.title = 'you came back'; }

</script>

Answer 2

$(window).focus(function() {
   document.title = 'defult title';
});

$(window).blur(function() {
   document.title = 'you went?';
});

Answer 3

You can use :

window.addEventListener('blur',function(){
alert("please Came Back");
 document.head.title = "your tilte"
  });

 window.addEventListener('focus',function(){
 alert("Hi");
 document.head.title = "your tilte"
  });

Answer 4

best for me is use:

window.onload = function() {

  var pageTitle = document.title;
  var attentionMessage = 'Come Back!';

  document.addEventListener('visibilitychange', function(e) {
    var isPageActive = !document.hidden;

    if(!isPageActive){
      document.title = attentionMessage;
    }else {
      document.title = pageTitle;
    }
  });
};