pageShow event in javascript_问答_开发者_运维开发者技术经验分享

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.&l开发者_开发知识库t;/p> 
    </div> 
</div> 
</body>
</html>

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

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

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?

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.

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

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);
    });
});

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

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.

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

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.