javascript中的pageShow事件答案

【问题标题】：pageShow event in javascriptjavascript中的pageShow事件
【发布时间】：2015-09-19 05:09:00
【问题描述】：

我有以下代码：

<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>

但pageShow 事件未在 IE 中触发。知道为什么吗？

【问题讨论】：

你什么时候打电话给pageShow？什么是pageShowevent？
我从developer.mozilla.org/en/using_firefox_1.5_caching#Introduction读到的
您是否仅在 Firefox 中运行此页面？
不，我也必须在 ie 中运行它。
因此该命令仅适用于 FF。只需使用 onload - 或者因为您使用的是 jQuery，所以使用 jQuery 加载事件...

标签： javascript jquery

【解决方案1】：

OnPageShow 和 OnPageHide 是 new HTML5 event attributes，因此只能享受有限的浏览器支持（在撰写本文时）

现有浏览器的较新版本更有可能支持它。根据this article，Firefox 肯定会，Safari 也会如此。

我找不到任何明确说明的内容，但我想说的是，您使用的 IE 版本可能不支持这些事件。您能否发布此信息以进行澄清。

希望对你有帮助

【讨论】：

404 在您上面的 w3schools.com 链接上。

【解决方案2】：

您的代码不一致。您正在同时使用jQuery.ready、onload、onpageshow。似乎是开始重构过程的好地方。

你真正想达到什么目标？

【讨论】：

同意。你到底想达到什么目的？ +1
这可能是一个学习练习。他们可能只想获得更多的了解
是的，或者只是给某人 +50 赏金和恩人徽章给自己

【解决方案3】：

这是一个拼写错误；在 body 的标签中，事件的名称是“onpageshow”，没有“pageshow”。

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

不支持 IE 的 pageshow 事件。

【讨论】：

【解决方案4】：

根据我的测试：

IE8/9 不支持页面显示/页面隐藏
Chrome12 会触发它们，但似乎没有页面缓存 - 它们的行为与加载/卸载相同
FF4 按预期支持它们
iPad 上的 iOS 按预期支持它们

【讨论】：

【解决方案5】：

您的 jQuery 代码永远不会被执行。您应该在 jQuery 的“就绪”事件中运行它：

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

【讨论】：

@ibhbuhbuhb：你能把你的jQuery代码移到文档的<head>吗？
你的意思是准备好的事件。 $(函数() {});是 jQuery ready 的简写。

【解决方案6】：

旧版本的 Internet Explorer 不支持 PageShow 事件，这很可能是您遇到的问题。

【讨论】：

在 IE11 和 Edge 中似乎支持它。
嗯，好的。我想我应该澄清一下旧版本的 IE 不支持它。
我已经给出了关于如何支持旧浏览器的非常详细的答案。请注意，微软在 2016 年 1 月之后基本上不支持 IE8、IE9、IE10，因此根据项目，您可能可以避免支持它们 - 请参阅 computerworld.com/article/2490996/microsoft-windows/… - 您至少应该编辑您的答案以将其更新为正确的信息。
没有意识到我可以编辑我的原始帖子...我刚刚更新了它。

【解决方案7】：

取消window.onload 和pageshow。无论您想在窗口加载、正文加载或页面显示时执行什么，都将它们放在$(document).ready() 中，一旦页面加载完毕，它们将依次执行。

【讨论】：

$(document).ready() 在页面加载完成时不会触发，它会在 DOM 准备就绪时触发。 $(window).load() 相当于使用
是的，是的！但这是放置页面加载后需要执行的代码的最佳位置（DOM 已准备好）。

【解决方案8】：

我使用的是 FF 4.0.1

即使在这种情况下，您的 pageShow 事件也不会触发。

click here

更多信息

更新： pageShow 在pageLoad 之后触发。

最好使用onLoad。

pageShow 应该是onpageShow

【讨论】：

【解决方案9】：

pageshow 事件在许多浏览器中不起作用，例如如果在移动应用中使用 WebView 或 UIWebView。

相反，您需要四管齐下：

onfocus 在桌面页面和一些移动页面恢复活力时出现
pageshow 在 iOS Safari 恢复活力时出现 - 但不是 UIWebView
visibilitychange 在 Windows Mobile IE11 恢复运行时出现 - 请参阅 http://daniemon.com/tech/webapps/page-visibility/ 并尝试 http://jsbin.com/runed/4 编辑：看起来 WP8.1 上的 IE11 现在支持 pageshow 事件。
webkitRequestAnimationFrame 检测移动应用程序内的页面是否返回焦点。需要解决方法，因为 window.focus、visibilitychange 和 pageshow 事件在 Android 应用 (WebView) 或 iOS 应用 (UIWebView) 中不起作用。

代码可能如下所示：

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

如果您希望支持

编辑：请注意，大多数现代浏览器（包括桌面 IE11 和桌面 Edge）都支持 pageshow 事件。

【讨论】：

【解决方案10】：

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

是 $(document).ready() 的简写。 document.ready 在 DOM 加载后立即触发，在其中添加 window.onload 是不必要的。

IE 不会触发“pageshow”事件，因为它无法识别它。

【讨论】：

为什么这被否决了？！ 4年后？！当时的事实是正确的。 Pageshow 出现在 IE 11 中！