pageShow event in javascript

Question

I have the following code:

Answer 1

Your code is inconsistent. You're using jQuery.ready, onload, onpageshow at the same time. Seems like a good place to start your refactoring process.

What do you really want to achieve?

Answer 2

PageShow event is not supported in older versions of Internet Explorer, which is most likely the problem that you are having.

Answer 3

OnPageShow and OnPageHide are new HTML5 event attributes, and as such will only enjoy limited browser support (at the time of writing)

Its more likely that later versions of incumbent browsers will support it. Firefox certainly will, as will Safari according to this article.

I couldn't find anything that stated it definitively, but I would say that its likely that these events aren't supported in the version of IE that you are using. Can you maybe post this information for clarification.

Hope this helps

Answer 4

The pageshow event doesn't work in many browsers e.g. if using WebView or UIWebView within an App on mobile.

Instead you need a four pronged attack:

1. onfocus occurs when desktop pages and some mobile pages come back to life

2. pageshow occurs when iOS Safari comes back to life - but not UIWebView

3. visibilitychange occurs when Windows Mobile IE11 comes back to life - see http://daniemon.com/tech/webapps/page-visibility/ and try http://jsbin.com/runed/4 Edit: Looks like IE11 on WP8.1 now supports the pageshow event.

4. webkitRequestAnimationFrame detects if page inside Mobile App comes back to focus. Workaround needed because window.focus, visibilitychange and pageshow events don't work in Android apps (WebView) or iOS apps (UIWebView).

Code might look like:

window.addEventListener('focus', pageAwakened);
window.addEventListener('pageshow', pageAwakened);
window.addEventListener('visibilitychange', function() {
    !document.hidden && pageAwakened();
});
if (window.webkitRequestAnimationFrame && (/^iP/.test(navigator.platform) || /Android/.test(navigator.userAgent))) {
    webkitRequestAnimationFrame(webkitWake);
}

var lastTs;
function webkitWake(timestamp) {
    if ((timestamp - lastTs) > 10000) {
        pageAwakened();
    }
    lastTs = timestamp;
    webkitRequestAnimationFrame(webkitWake);
}

function pageAwakened() {
    console.log('awakened at ' + (new Date));
}

If you wish to support <= IE8 or documentMode <= 8 then need attachEvent for focus.

Edit: Note that most modern browsers (including desktop IE11 and desktop Edge) support the pageshow event.

Answer 5

$(function(){ //your code })

Is the shorthand for $(document).ready(). document.ready fires just after the DOM is loaded, adding a window.onload inside it is unnecessary.

IE wont fire a "pageshow" event, since it doesn't recognize it.

Answer 6

Do away with window.onload and pageshow. Whatever you want to be executed on window load, body load or page show put them in $(document).ready(), they will be executed serially once the page has been loaded.