Html5中hashchange、pageshow和pagehide事件怎么应用

本篇内容主要讲解“Html5中hashchange、pageshow和pagehide事件怎么应用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Html5中hashchange、pageshow和pagehide事件怎么应用”吧!

1.hashchange 事件

HTML5新增了 hashchange 事件，以便在 URL的参数列表(及 URL中“#”号后面的所有字符串) 发生变化时通知开发人员。之所以新增这个事件，是因为在 Ajax应用中，开发人员经常要利用 URL参 数列表来保存状态或导航信息。

必须要把 hashchange 事件处理程序添加给 window 对象，然后 URL参数列表只要变化就会调用 它。此时的 event 对象应该额外包含两个属性：oldURL 和 newURL。这两个属性分别保存着参数列表 变化前后的完整 URL。例如：

EventUtil.addHandler(window, "hashchange", function(event){

alert("Old URL: " + event.oldURL + "nNew URL: " + event.newURL); });

支持 hashchange 事件的浏览器有 IE8+、Firefox 3.6+、Safari 5+、Chrome和 Opera 10.6+。在这些 浏览器中，只有 Firefox 6+、Chrome和 Opera支持 oldURL 和 newURL 属性。为此，好是使用 location 对象来确定当前的参数列表。

EventUtil.addHandler(window, "hashchange", function(event){

alert("Current hash: " + location.hash);

});

使用以下代码可以检测浏览器是否支持 hashchange 事件：

var isSupported = ("onhashchange" in window); //这里有 bug

如果 IE8 是在 IE7 文档模式下运行，即使功能无效它也会返回 true。为解决这个问题南昌APP开发公司亿速云开发工程师建议大使用以下这个更稳妥的检测方式：

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);

2. pageshow 和 pagehide 事件

Firefox 和 Opera 有一个特性，名叫“往返缓存”(back-forward cache，或 bfcache)，可以在用户使 用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存 了 DOM和 JavaScript的状态;实际上是将整个页面都保存在了内存里。如果页面位于 bfcache中，那么 再次打开该页面时就不会触发 load 事件。尽管由于内存中保存了整个页面的状态，不触发 load 事件 也不应该会导致什么问题，但为了更形象地说明 bfcache的行为，Firefox还是提供了一些新事件。

第一个事件就是 pageshow，这个事件在页面显示时触发，无论该页面是否来自 bfcache。在重新加 载的页面中，pageshow 会在 load 事件触发后触发;而对于 bfcache中的页面，pageshow 会在页面状 态完全恢复的那一刻触发。另外要注意的是，虽然这个事件的目标是 document，但必须将其事件处理 程序添加到 window。来看下面的例子。

(function(){

var showCount = 0;

EventUtil.addHandler(window, "load", function(){

alert("Load fired");

});

EventUtil.addHandler(window, "pageshow", function(){

showCount++;

alert("Show has been fired " + showCount + " times. ");

});

})();

这个例子使用了私有作用域，以防止变量 showCount 进入全局作用域。当页面首次加载完成时， showCount 的值为 0。此后，每当触发 pageshow 事件，showCount 的值就会递增并通过警告框显示 出来。如果你在离开包含以上代码的页面之后，又单击“后退”按钮返回该页面，就会看到 showCount 每次递增的值。这是因为该变量的状态，乃至整个页面的状态，都被保存在了内存中，当你返回这个页 面时，它们的状态得到了恢复。如果你单击了浏览器的“刷新”按钮，那么 showCount 的值就会被重 置为 0，因为页面已经完全重新加载了。

除了通常的属性之外，pageshow 事件的 event 对象还包含一个名为 persisted 的布尔值属性。 如果页面被保存在了 bfcache中，则这个属性的值为 true;否则，这个属性的值为 false。可以像下面 这样在事件处理程序中检测这个属性。

(function(){

var showCount = 0;

EventUtil.addHandler(window, "load", function(){

alert("Load fired");

});

EventUtil.addHandler(window, "pageshow", function(event){

showCount++;

alert("Show has been fired " + showCount + " times. Persisted? " + event.persisted);

});

EventUtil.addHandler(window, "pagehide", function(event){

alert("Hiding. Persisted? " + event.persisted);

});

})();

通过检测 persisted 属性，就可以根据页面在 bfcache中的状态来确定是否需要采取其他操作。 与 pageshow 事件对应的是 pagehide 事件，该事件会在浏览器卸载页面的时候触发，而且是在 unload 事件之前触发。与 pageshow 事件一样，pagehide 在 document 上面触发，但其事件处理程 序必须要添加到 window 对象。这个事件的 event 对象也包含 persisted 属性，不过其用途稍有不同。 来看下面的例子。

EventUtil.addHandler(window, "pagehide", function(event){

alert("Hiding. Persisted? " + event.persisted);

});

有时候，可能需要在 pagehide 事件触发时根据 persisted 的值采取不同的操作。对于 pageshow 事件，如果页面是从 bfcache中加载的，那么 persisted 的值就是 true;对于 pagehide 事件，如果 页面在卸载之后会被保存在 bfcache中，那么 persisted 的值也会被设置为 true。因此，当第一次触 发 pageshow 时，persisted 的值一定是 false，而在第一次触发 pagehide 时，persisted 就会变 成 true(除非页面不会被保存在 bfcache中)。

支持 pageshow 和 pagehide 事件的浏览器有 Firefox、Safari 5+、Chrome和 Opera。IE9及之前版 本不支持这两个事件。

指定了 onunload 事件处理程序的页面会被自动排除在 bfcache之外，即使事件 处理程序是空的。原因在于，onunload 常用于撤销在 onload 中所执行的操作， 而跳过 onload 后再次显示页面很可能就会导致页面不正常。

到此，相信大家对“Html5中hashchange、pageshow和pagehide事件怎么应用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！