pageShow event in javascript

Question

I have the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" language="javascript">
    $( function() {
        window.onload = function () {
            alert('This page was just hidden:');
        }
    });
    </script>
</head>
<body pageshow="alert('Done');">
<div id="mypage" data-role="page"  data-theme="b"> 
    <div data-role="header">
        <h1>Page 2</h1>
    </div> 
    <div data-role="content">
        <p>This is page 2.</p> 
    </div> 
</div> 
</body>
</html>

But the pageShow event is not firing in IE. Any idea why?

when do you ever call `pageShow`? what is a `pageShow`event? — Naftali, Jun 15 '11 at 19:50
I read it from https://developer.mozilla.org/en/using_firefox_1.5_caching#Introduction — facebook, Jun 15 '11 at 19:54
so that command will only work in FF. just use onload -- OR since you are using jQuery, use jQuery load events... — Naftali, Jun 15 '11 at 19:57
duplicate of http://stackoverflow.com/questions/4509688/jquery-pageshow-for-ie — JAiro, Jun 21 '11 at 12:26
@ibhbuhbuhb: Are you intending to accept, or indicate why any of the answers do not meet your criteria? — James Wiseman, Jun 28 '11 at 10:10
I'm guessing you are using 'pageshow' to have the JS excuted when clicking the browsers back button. You can use the 'unload' event to do this in IE and all other browsers. — Drew Baker, Jul 02 '11 at 00:21

James Wiseman · Accepted Answer · 2013-07-18T07:24:06.100

20

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

edited Jul 18 '13 at 07:24

answered Jun 21 '11 at 13:53

James Wiseman

29,946
17
95
158

404 on your w3schools.com link above. – Justin Makeig Jul 17 '13 at 22:24

score 8 · Answer 2 · answered Jun 21 '11 at 22:18

8

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?

answered Jun 21 '11 at 22:18

gblazex

49,155
12
98
91

2

Agreed. What the heck are you actually trying to accomplish? +1 – Techgration Jun 23 '11 at 21:02
2

Its possible its a learning exercise. They might be wanting to achieve nothing more than a greater understanding – James Wiseman Jun 26 '11 at 16:16
yeah, or just give someone +50 bounty and the Benefactor badge to himself – WooDzu Jun 26 '11 at 16:54

sahid · Answer 3 · 2011-06-26T22:21:54.990

5

It is a mispell; in the body's tag, the name of the event is "onpageshow" and no "pageshow".

...
<body onpageshow="alert('Done');">
...

For IE pageshow event is not supported.

edited Jun 26 '11 at 22:21

answered Jun 26 '11 at 22:12

sahid

2,570
19
25

George Cummins · Answer 4 · 2015-04-24T11:19:23.803

1

Your jQuery code never gets executed. You should run it from within jQuery's "ready" event:

$( function() {
    $('#mypage').live('pageshow', function (event, ui) {
        alert('This page was just hidden: ' + ui.prevPage);
    });
});

edited Apr 24 '15 at 11:19

answered Jun 15 '11 at 19:35

George Cummins

28,485
8
71
90

@ibhbuhbuhb: Can you move your jQuery code into the `` of the document? – George Cummins Jun 15 '11 at 19:39
You mean ready event. $(function() {}); is shorthand for jQuery ready. – Michael Giovanni Pumo Apr 24 '15 at 10:48

Techgration · Answer 5 · 2015-09-18T21:09:00.293

1

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

edited Sep 18 '15 at 21:09

answered Jun 23 '11 at 21:05

Techgration

516
4
16

Looks like it is supported in IE11 and Edge. – robocat Sep 07 '15 at 06:10
Ah ok. Guess I should have clarified that it isn't supported in older versions of IE. – Techgration Sep 09 '15 at 00:58
I already gave a very detailed answer on how to support older browsers. Note that IE8,IE9,IE10 are basically not supported by Microsoft after Jan 2016 so depending on project you might be able to avoid supporting them - see http://www.computerworld.com/article/2490996/microsoft-windows/microsoft-slashes-ie-support--sets--huge--edict-for-jan--2016.html - and you should at least edit your answer to update it to the correct info. – robocat Sep 10 '15 at 02:16
Didn't realize I could edit my original posts... I updated it just now. – Techgration Sep 18 '15 at 21:09

score 1 · Answer 6 · answered Jun 28 '11 at 00:28

1

From my tests:

IE8/9 does not support pageshow/pagehide
Chrome12 fires them but doesn't appear to have a page cache - they behave the same as load/unload
FF4 supports them as expected
iOS on iPad supports them as expected

answered Jun 28 '11 at 00:28

dan gibson

3,605
3
39
57

robocat · Answer 7 · 2015-09-10T02:21:50.757

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:

onfocus occurs when desktop pages and some mobile pages come back to life
pageshow occurs when iOS Safari comes back to life - but not UIWebView
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.
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.

score 0 · Answer 8 · edited Jun 27 '11 at 19:46

0

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.

edited Jun 27 '11 at 19:46

DarthJDG

16,511
11
49
56

answered Jun 22 '11 at 18:57

Troy SK

1,279
7
14

2

$(document).ready() does not fire when the page is done loading, it fires when the DOM is..well..ready. $(window).load() is the equivalent of using – CaptSaltyJack Jun 23 '11 at 19:48
1

Yesh Yesh! But thats the best place to put your code which needs to be executed once page has loaded (DOM is ready). – Troy SK Jun 24 '11 at 16:16

score 0 · Answer 9 · answered Jun 28 '11 at 11:34

0

i'm using FF 4.0.1

your pageShow event won't fire even in this.

click here

for more information

Update: pageShow fire after pageLoad.

it's better to use onLoad.

pageShow should be onpageShow

answered Jun 28 '11 at 11:34

Ravi Parekh

5,253
9
46
58

score -1 · Answer 10 · answered Jun 28 '11 at 11:14

-1

$(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.

answered Jun 28 '11 at 11:14

Adil

2,092
3
25
35

1

Why has this been downvoted?! After 4 years?! The facts were correct at the time. Pageshow showed up in IE 11! – Adil Jul 01 '15 at 13:12

pageShow event in javascript

10 Answers10

Linked