html5 使用window.history进行页面刷新

//主要行为和方法如下:

使用方式

if (!!(window.history && history.pushState))
 {   
   // 支持History API
    var stateObj = { foo: "bar" }; 
    history.pushState(stateObj, "page 2", "user.html"); 
    //第一个参数是 附加数据,第二个参数是title,第三个是url尾部
    //当前页面如果是 http://www.opq.me触发后将是http://www.opq.me/user.html(实际上user.html不存在,但这里并不会出现NotFound404 )
    //这种行为是入栈
    
    /**++++++++++++++++++++++++++++++++++++++++++++++++++++++***/
    //为了响应出栈,我们需要监听 出栈事件
    window.addEventListener(window,‘popstate‘,function onPopStack(evt){
         var e = evt || window.event;
         console.log("location: " + document.location);   
         console.log("state: " + JSON.stringify(event.state));
         console.dir(evt);  
    },true);
  
 } 
else {  
 // 不支持 
}

如何出栈,出站后如何前进?

这是一个不是问题的问题:

①答案是: History.back()          history.go(index)      history.forward(),当然这是对于使用程序控制的

②还有一个答案是浏览器的回退和前进按钮


意义浅析,这种网站的意义不言而喻,我们只需要一个页面就可以完成很多任务,但后台控制器只有一个,少了很多请求,也提高和用户体验

目前前端MVC框架backbone.js使用了 锚链接的方式,没有使用history api,主要是为了兼容 IE浏览器,期待未来history api本融入其中。



html5 使用window.history进行页面刷新

上一篇:C# GET 和 SET作用


下一篇:Day10----------alphaPic