Detect when page visibility state is changed

The JS script presented in this page can be used to execute a JavaScript function when the page visibility state changes (when it is opened another window, or focus again this page); the function is whenVisChg(), see the comments in code.

Script code - click to select it

<script>
//JS code from: https://coursesweb.net/javascript/
// Defines a handler for page visibility changes
var vis_chg = (function(){
  var stateKey, eventKey, keys = {
    hidden: 'visibilitychange',
    webkitHidden: 'webkitvisibilitychange',
    mozHidden: 'mozvisibilitychange',
    msHidden: 'msvisibilitychange'
  };
  for(stateKey in keys){
    if(stateKey in document){
      eventKey = keys[stateKey];
      break;
    }
  }
  return function(c){
    if(c){
      document.addEventListener(eventKey, c);
      //document.addEventListener('focus', c); //for when focus again this page
    }
    return !document[stateKey];
  }
})();

// Gives the initial state
var page_vstate = vis_chg() ?'visible' :'not-visible';

vis_chg(function(){
  var re_vchg = vis_chg(); //FALSE=leaves the page; TRUE=re-enter in page
  console.log(new Date, 'vis_chg: ', re_vchg); //for debug in console
  page_vstate = re_vchg ?'visible' : whenVisChg();
});

//This function is executed when the page changes visibility state
function whenVisChg(){
  document.title ='not-visible';  //changes page title in browser

  //HERE you can set your code
  alert('page visibility state changed');

  return 'not-visible';
}
</script>

- To test the script, click on , or just open a new tab /window in your browser. The Title of this page in browser will be changed and an alert message box will be displayed on this page.

<<-Ajax script to Save .. -- Add /Delete rows in ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Last accessed pages

querySelector and querySelectorAll ^(30124)
sPBM - Simple PHP Backup Manager ⁽³⁴⁰²⁾
Vue JS - Transition and Animation ⁽⁴⁹⁰⁾
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(141749)
Node.js Move and Copy file ^(28420)

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁴⁷³⁾
CSS cursor property - Custom Cursors ⁽⁷⁹⁾
The Mastery of Love ⁽⁷⁰⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽⁶²⁾
CSS3 2D transforms ⁽⁴⁶⁾