visibilityChange and pagehide do not work in IOS - javascript

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.

Related

browser close not triggering the visibilityChange on safari

I am trying to save some statistics when the user closes the browser, below is the code
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
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';
} else {
console.log('in else condition');
}
if (typeof document.addEventListener === 'undefined' || hidden === undefined) {
console.log("App requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
function handleVisibilityChange() {
// Send a ajax call with **async: false**
}
The above code works well in mozilla firefox, google chrome but does not in safari. I am testing this on Mac Os and safari version is Version 12.1.1 (14607.2.6.1.1)
Can any please suggest if this is an expected behaviour in safari and what could be done as a workaround.
Thanks.
According to the MDN docs, the "pagehide" event should work for this:
If you're specifically trying to detect page unload events, the pagehide event is the best option.
https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

iOS Safari standalone exception to external navigation

I have this code I grabbed somewhere to make my Standalone iOS Web-App stay within itself while navigating in the app:
(function(document, navigator, standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode,
location = document.location,
stop = /^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode = e.target;
while (!(stop).test(curnode.nodeName)) {
curnode = curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if ('href' in curnode && (curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host)) && e.defaultPrevented !== true) {
e.preventDefault();
location.href = curnode.href;
}
}, false);
}
})(document, window.navigator, 'standalone');
This basically prevents the app from going in background and opening a link in Safari while in the App.
I need an exception to this, so that when I place a target="_blank" or a rel="external" attribute it actually has to open in Safari (and the WEb-App going to background).
I tried placing an if statement before line 15 like this:
(function(document, navigator, standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode,
location = document.location,
stop = /^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode = e.target;
while (!(stop).test(curnode.nodeName)) {
curnode = curnode.parentNode;
}
if (e.target.getAttribute('rel') == 'external') {
window.open("http://www.google.com");
} else {
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if ('href' in curnode && (curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host)) && e.defaultPrevented !== true) {
e.preventDefault();
location.href = curnode.href;
}
}
}, false);
}
})(document, window.navigator, 'standalone');
But does not work...
This is the solution:
(function(document, navigator, standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode,
location = document.location,
stop = /^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode = e.target;
while (!(stop).test(curnode.nodeName)) {
curnode = curnode.parentNode;
}
if (curnode.getAttribute('rel') == 'external') {
window.open("http://www.google.com");
} else {
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if ('href' in curnode && (curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host)) && e.defaultPrevented !== true) {
e.preventDefault();
location.href = curnode.href;
}
}
}, false);
}
})(document, window.navigator, 'standalone');

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>

How to identify if the child window has been closed in javascript?

i have this page which opens up a popup. i want to refresh the parent after popup has been closed.. i used the function i found in stackoverflow
var win = window.open("popup.html");
function doStuffOnUnload() {
alert("Unloaded!");
}
if (typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", doStuffOnUnload);
}
else if (typeof win.addEventListener != "undefined") {
win.addEventListener("unload", doStuffOnUnload, false);
}
which didn't do anything after i closed the pop up... what can i do achieve this?
thanks...
You wrote the unload event in the wrong place. You added an unload event to the main page instead of to the popup...
var win = window.open("popup.html"); // O.K.
All of this should be in the popup.html page...
function doStuffOnUnload() {
alert("Unloaded!");
}
if (typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", doStuffOnUnload);
} else if (typeof win.addEventListener != "undefined") {
win.addEventListener("unload", doStuffOnUnload, false);
}
You can use the unload jquery function:
$(window).unload(doStuffOnUnload);
unload docs

document.hasFocus() for chrome

Does anyone know what to use instead of hasFocus() for Chrome? I want to know when my Chrome tab has focus or not, so I can blink an alert message in the title.
Cheers
You could listen for the onfocus/onblur events and keep track of page state that way.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output">
</div>
<script>
var has_focus = true;
function print(str) {
var out = document.getElementById('output')
out.innerText = out.innerText + "\n" + str;
};
window.onfocus = function() {
print('focus');
has_focus = true;
};
window.onblur = function() {
print('blur');
has_focus = false;
};
</script>
</body>
</html>
The page visibility API should do the trick:
https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API
document.hidden
Returns true if the page is in a state considered to
be hidden to the user, and false otherwise.
Of course, since this is a new API, you'll need to use different browser prefixes:
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
}
var isHidden = document[hidden];
// or even
var isFocused = !isHidden;
You would use the document.activeElement tag.

Categories

Resources