Develop Reference

visibilityChange and pagehide do not work in IOS

I'm creating a game page with JavaScript.
I am currently registering the Visibility Change event listener to turn on/off the BGM, but if I close the screen in IOS, the application will no longer move.
So I commented out the Visibility Change event. On Android, the BGM continues to play when the screen is closed, but iOS stops playing even without a BGM OFF event.
I tried the pagehide event, but it doesn't seem to work.
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined")
{
hidden = "hidden";
visibilityChange = "visibilitychange";
}
else if (typeof document.mozHidden !== "undefined")
{
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
}
else if (typeof document.msHidden !== "undefined")
{
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
}
else if (typeof document.webkitHidden !== "undefined")
{
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, SnlPixiMgr.VisibilityChange, false );
window.addEventListener("pageshow", function(evt){
alert('show');
}, false);
window.addEventListener("pagehide", function(evt){
alert('hide');
}, false);
arguments.callee.VisibilityChange = function()
{
console.log("VisibilityChange called");
if(document.hidden)
{
for( var i=0; i<SnlPixiMgr.m_HiddenEvent.length; i++ )
{
SnlPixiMgr.m_HiddenEvent[i]();
}
}
else
{
for( var i=0; i<SnlPixiMgr.m_VisibleEvent.length; i++ )
{
SnlPixiMgr.m_VisibleEvent[i]();
}
}
}
I want the BGM to be turned on and off properly when I turn the screen off and on in iOS.

How to prevent logging out automatically when the back button is clicked?

I am using code to logout of application automatically when the browser is closed, but the impact of the code is when I press the browser's back button and navigate to another page then also it automatically logout from the application.
I want my code to logout automatically only when the browser is closed and not when I am navigating through back button
can you help me in this, Thanks
Here is my code
$(window).on('mouseover', (function () {
window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
$.get("call to a php code to logout");
}
var prevKey="";
$(document).keydown(function (e) {
if (e.key=="F5"){
window.onbeforeunload = ConfirmLeave;
}else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {
window.onbeforeunload = ConfirmLeave;
}else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
window.onbeforeunload = ConfirmLeave;
}else if (e.key.toUpperCase() == "F4" && prevKey == "ALT") {
window.onbeforeunload = ConfirmLeave;
}
prevKey = e.key.toUpperCase();
});
The php code is
$this->session->sess_destroy();
$this->load->driver('cache');
$this->cache->clean();
ob_clean();
redirect("login page");

onbeforeunload event occurs when we close the browser and also when we press the back button. It fails to distinguish between the 2 actions.

Javascript interrupt normal behavior on link click momentarily

I want to do something before my page unloads so I'm trying to interrupt normal behaviour momentarily. I tried this but it doesn't seem to work:
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == `a`) {
document.body.classList.remove(`ready`);
document.body.classList.add(`leaving`);
setTimeout(function () {
return true; // return false = prevent default action and stop event propagation
}, 500);
}
}
0.5s is the time I need to display a short css animation before leaving the page.

You can try the following code:
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.tagName == `A`) { // !uppercased
e.preventDefault(); // prevent default anchor behavior
var goTo = element.href; // store target url
document.body.classList.remove(`ready`);
document.body.classList.add(`leaving`);
setTimeout(function () {
window.location = goTo; // navigate to destination
}, 500);
}
}

Script for browser detection and url linking

I'm new... I'm looking for a script that detects the browser and then a function that links to a specific url based on the browser being used. I'm stuck on how to combine two functions into one js file. Using the onclick method to call one of the two functions. Does this make sense? What are my options. I know userAgent is frowned upon, what are the work arounds?

Here is a script that can be modified very easily to include all modern browsers, this is not based on mouseover but is based on Browser detection and redirection depending on what browser.. if this is not what you are looking for please explain in more detail and either i or someone else will be able to help out better... Do you have example pages or code to work with?
version = parseInt(navigator.appVersion);
if (navigator.appVersion.indexOf('5.') > -1) {
version = 5
};
if (navigator.appVersion.indexOf('6.') > -1) {
version = 6
};
if (navigator.appVersion.indexOf('7.') > -1) {
version = 7
};
browser = 'OTHER';
if (navigator.appName == 'Netscape') {
browser = 'NS' + version;
}
if (navigator.appName == 'Microsoft Internet Explorer') {
browser = 'MSIE' + version;
}
if (navigator.appVersion.indexOf('MSIE 3') > 0) {
browser = 'MSIE3';
}
if (browser == 'NS5') {
browser = 'NS6'
};
if (browser == 'MSIE3') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE4') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE5') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE6') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'MSIE7') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS3') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS4') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS6') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'NS7') {
window.location = 'http://www.mywebsite.com'
}
if (browser == 'OTHER') {
window.location = 'http://www.mywebsite.com'
}
Thanks

Trigger an event when the browser back button is clicked

I am trying to run some code when the browser back button is clicked.
How can i found out browser's back button with out changing the browser history?
I tried the code below.
I got an exception in the else block saying: "event is not defined".
window.onunload = HandleBackFunctionality();
function HandleBackFunctionality()
{
if(window.event)
{
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked…");
} else {
alert("Browser refresh button is clicked…");
}
} else {
if(event.currentTarget.performance.navigation.type == 1)
{
alert("Browser refresh button is clicked…");
}
if(event.currentTarget.performance.navigation.type == 2)
{
alert("Browser back button is clicked…");
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

use
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// do something
}
if (direction == 'forward') {
// do something else
}
});

Okay. Besides the fact that you should not initially trigger the event and to .unload = FunctionName and not .unload=FunctionName() and that you need to pass the event-argument I checked the code in the browser.
currentTarget is empty - this totally makes sense as there is no event-target like onclick but it is just the site reloading/unloading.
Please debug the code by yourself by using this and fit it to your needs:
window.onunload = HandleBackFunctionality;
function HandleBackFunctionality(event)
{
console.log(event, window.event);
}
You will see that currentTarget is not set (while event is).

This is the only solution that works for me with IOS safari.
<script>
window.addEventListener( "pageshow", function ( event ) {
var pagehistory = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if ( pagehistory ) {
// back button event - Do whatever.
}
});
</script>