Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

html5事件

发布于:  

今天在项目中看到监听pagehide事件,学习了一下 这里记录一下

pageshow 和 pagehide事件

现代浏览器有新的特性, 会缓存页面, 往返缓存”(back-forward cache) pageshow,这个事件是在页面显示时触发,无论该页面是否来自bfcache,重新加载的页面中,pageshow会在load事件触发后触发;而对于bfcache中的页面,pageshow会在页面状态恢复的那一刻触发。值得注意的是,虽然这个事件的目标是document,但必须将其事件添加到window。

 (function(){
    var showCount = 0;
    addEventListener("load", function(){
        alert("Load fired");            
    });
    addEventListener("pageshow", function(event){
        showCount++;
        alert("Show has been fired " + showCount + " times. Persisted? " + event.persisted);            
    });
    addEventListener("pagehide", function(event){
        alert("Hiding. Persisted? " + event.persisted);            
    });
})();

支持pageshow和pagehide事件的浏览器有Firefox、Safari5+、chrome、opera。IE9之前的浏览器不支持

hashchange事件

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

必须要把hashchange事件添加到window对象,然后url参数列表只要变化就会调用它,此时event对象应该额外包含两个属性:oldurl和newurl.这两个属性分别保存着参数列表变化前和变化后的完整url。

addEventListener("hashchange", function(event){
    alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});

支持hashchange事件的浏览器有IE8+,Firefox3.6+,Safari5+,chrome和opera10。6+。在这些浏览器中只有Firefox6+、chrome、opera支持newurl和oldurl属性,为此,最好使用location对象来确定当前的参数列表

厚颜一下 ~^_^~

赏赐