{"id":59794,"date":"2023-07-06T03:01:27","date_gmt":"2023-07-05T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59794"},"modified":"2023-07-06T07:13:06","modified_gmt":"2023-07-05T21:13:06","slug":"onpageshow-and-onpagehide-and-onvisibilitychange-events-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/onpageshow-and-onpagehide-and-onvisibilitychange-events-primer-tutorial\/","title":{"rendered":"Onpageshow and Onpagehide and Onvisibilitychange Events Primer Tutorial"},"content":{"rendered":"
\"Onpageshow<\/a>

Onpageshow and Onpagehide and Onvisibilitychange Events Primer Tutorial<\/p><\/div>\n

Today, we discuss alternative event ideas to document.body onload<\/i> and onunload<\/i> events tracing the navigating to and from a webpage, respectively.<\/p>\n

The three event types we’ve experimented with, today, in our proof of concept HTML and Javascript pageTransitions.html<\/a>, are, with mixed success …<\/p>\n

    \n
  1. onpageshow<\/a> (at same time as document.body onload event) … opening … versus … closing …<\/li>\n
  2. onpagehide<\/a> (we had little success with this event) … and we had more success with …<\/li>\n
  3. onvisibilitychange<\/a> (in conjunction with document.visibilityState === “hidden”<\/i> we succeeded)<\/li>\n<\/ol>\n


    \n<html>
    \n<head>
    \n<title>Page Transitions - RJM Programming - June, 2023 ... thanks to https:\/\/www.w3schools.com\/jsref\/event_onpageshow.asp and https:\/\/www.w3schools.com\/jsref\/event_onpagehide.asp<\/title>
    \n<script type=text\/javascript>
    \n
    \n function myFunction(opening) {
    \n if (opening) {
    \n document.getElementById(\"mya\").href = document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19877654);
    \n document.title='You got to ' + document.URL + ' at ' + ('' + new Date()) + '.';
    \n document.getElementById(\"myh1\").innerHTML+='<br>' + document.title;
    \n document.body.style.backgroundColor='lightgreen';
    \n } else {
    \n document.title='You left ' + document.URL + ' at ' + ('' + new Date()) + '.';
    \n document.getElementById(\"solong\").innerHTML+='<br>' + document.title;
    \n document.body.style.backgroundColor='yellow';
    \n }
    \n }
    \n
    \n function myCloseFunction() {
    \n if (document.visibilityState === \"hidden\") {
    \n document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.';
    \n document.getElementById(\"solong\").innerHTML+='<br>' + document.title;
    \n document.body.style.backgroundColor='yellow';
    \n } else {
    \n myFunction(true);
    \n }
    \n }
    \n
    \n document.onvisibilitychange = function() {
    \n if (document.visibilityState === \"hidden\") {
    \n document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.'
    \n document.getElementById(\"solong\").innerHTML+='<br>' + document.title;
    \n document.body.style.backgroundColor='yellow';
    \n } else {
    \n myFunction(true);
    \n }
    \n };
    \n
    \n document.onpagehide = function() {
    \n if (document.visibilityState === \"hidden\") {
    \n document.title='You Left ' + document.URL + ' at ' + ('' + new Date()) + '.';
    \n document.getElementById(\"solong\").innerHTML+='<br>' + document.title;
    \n document.body.style.backgroundColor='yellow';
    \n } else {
    \n myFunction(true);
    \n }
    \n };
    \n
    \n<\/script>
    \n<\/head>
    \n<body onvisibilitychange=\"myCloseFunction();\" onpagehide=\"myFunction(false);\" onpageshow=\"myFunction(true);\">
    \n<h1 id=myh1><\/h1><br><br>
    \n<a target=_blank id=mya href=''>Open new webpage incarnation ...<\/a><br><br>
    \n<h4 id=solong><\/h4><br><br>
    \n<\/body>
    \n<\/html>
    \n<\/code><\/p>\n

    So feel free to try these means by which you can welcome<\/i> and plan for leaving<\/i> respectively in web application<\/a>.<\/p>\n

    If this was interesting you may be interested in this<\/a> too.<\/p>\n