<html>
<head>
<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>
<script type=text/javascript>
function myFunction(opening) {
if (opening) {
document.getElementById("mya").href = document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19877654);
document.title='You got to ' + document.URL + ' at ' + ('' + new Date()) + '.';
document.getElementById("myh1").innerHTML+='<br>' + document.title;
document.body.style.backgroundColor='lightgreen';
} else {
document.title='You left ' + document.URL + ' at ' + ('' + new Date()) + '.';
document.getElementById("solong").innerHTML+='<br>' + document.title;
document.body.style.backgroundColor='yellow';
}
}
function myCloseFunction() {
if (document.visibilityState === "hidden") {
document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.';
document.getElementById("solong").innerHTML+='<br>' + document.title;
document.body.style.backgroundColor='yellow';
} else {
myFunction(true);
}
}
document.onvisibilitychange = function() {
if (document.visibilityState === "hidden") {
document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.'
document.getElementById("solong").innerHTML+='<br>' + document.title;
document.body.style.backgroundColor='yellow';
} else {
myFunction(true);
}
};
document.onpagehide = function() {
if (document.visibilityState === "hidden") {
document.title='You Left ' + document.URL + ' at ' + ('' + new Date()) + '.';
document.getElementById("solong").innerHTML+='<br>' + document.title;
document.body.style.backgroundColor='yellow';
} else {
myFunction(true);
}
};
</script>
</head>
<body onvisibilitychange="myCloseFunction();" onpagehide="myFunction(false);" onpageshow="myFunction(true);">
<h1 id=myh1></h1><br><br>
<a target=_blank id=mya href=''>Open new webpage incarnation ...</a><br><br>
<h4 id=solong></h4><br><br>
</body>
</html>