JavaScript中的pageShow事件

Question

JavaScript中的pageShow事件

10

我有以下代码：

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

但是在 IE 中 pageShow 事件没有触发。有任何想法吗？

- facebook

你什么时候会调用 pageShow？pageShow事件是什么？ - Naftali

2

这个命令只能在FF中使用。你可以使用onload，或者既然你正在使用jQuery，就使用jQuery的load事件... - Naftali

重复http://stackoverflow.com/questions/4509688/jquery-pageshow-for-ie - JAiro

@ibhbuhbuhb：您打算接受哪个答案，还是说明为什么这些答案不符合您的标准？ - James Wiseman

我猜想你正在使用“pageshow”来使JavaScript在点击浏览器的后退按钮时执行。你可以使用“unload”事件在IE和其他所有浏览器中实现这一点。 - Drew Baker

显示剩余3条评论

10个回答

8

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

您真正想要实现什么？

- gblazex

2

同意。你到底想要实现什么？+1 - Techgration

2

可能这是一个学习练习。他们可能只是想要获得更深入的理解，而不是追求其他任何目标。 - James Wiseman

是的，或者只需给某人+50赏金并将受益人徽章授予他自己。 - WooDzu

5

这是一个拼写错误；在body标签中，事件的名称应为"onpageshow"而不是"pageshow"。

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

IE 不支持 pageshow 事件。

- sahid

1

你的jQuery代码从未执行。你应该在jQuery的"ready"事件中运行它：

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

- George Cummins

@ibhbuhbuhb：你能把你的jQuery代码移到文档的<head>标签中吗？ - George Cummins

你指的是ready事件。$(function() {}); 是jQuery ready的简写形式。 - Michael Giovanni Pumo

1

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

- Techgration

似乎在IE11和Edge中支持。 - robocat

啊，好的。我想我应该澄清一下，在旧版本的IE中不支持它。 - Techgration

我已经非常详细地回答了如何支持旧版浏览器的问题。请注意，微软在2016年1月之后基本上不再支持IE8、IE9和IE10，因此根据项目的不同，您可能可以避免支持它们 - 请参见http://www.computerworld.com/article/2490996/microsoft-windows/microsoft-slashes-ie-support--sets--huge--edict-for-jan--2016.html - 并且您至少应该编辑您的答案以更新正确的信息。 - robocat

没意识到我可以编辑我的原始帖子...我刚刚更新了它。 - Techgration

1

根据我的测试：

IE8/9 不支持 pageshow/pagehide 事件
Chrome12 触发这些事件，但似乎没有页面缓存 - 它们的行为与 load/unload 相同
FF4 的支持符合预期
iPad 上的 iOS 支持它们，与预期相同

- dan gibson

0

在许多浏览器中，例如在移动应用程序中使用 WebView 或 UIWebView 时，pageshow 事件无法正常工作。

相反，您需要进行四重攻击：

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

如果您希望支持<= IE8或documentMode <= 8，则需要为焦点附加attachEvent。

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

- robocat

0

我正在使用FF 4.0.1

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

点击这里

获取更多信息

更新： pageShow在pageLoad之后触发。

最好使用onLoad。

pageShow应该是onpageShow

- Ravi Parekh

0

摆脱 window.onload 和 pageshow。无论您想在窗口加载、页面加载或页面显示时执行什么操作，请将它们放在 $(document).ready() 中，它们将在页面加载后依次执行。

- Troy SK

2

$(document).ready() 不会在页面加载完成时触发，而是在 DOM 加载完成时触发。$(window).load() 相当于使用 <body onLoad="..">。 - CaptSaltyJack

1

是的，没错！但这是放置需要在页面加载后执行（DOM已准备就绪）的代码的最佳位置。 - Troy SK

-1

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

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

由于IE不识别"pageshow"事件，因此不会触发该事件。

- Adil

1

为什么这个问题会被踩？！已经过去4年了！当时的事实是正确的。Pageshow在IE 11中显示出来了！ - Adil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Wiseman · Accepted Answer

OnPageShow和OnPageHide是HTML5新事件属性, 因此在编写本文时仅受到有限的浏览器支持。

更可能的是，现有浏览器的后续版本将支持它。根据这篇文章, Firefox肯定会支持，Safari也会。

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

希望这可以帮助。