html5 使用window.history进行前端mvc跳转

2019独角兽企业重金招聘Python工程师标准>>>

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

• history.pushState()，

• history.replaceState()

• window.onpopstate事件

使用方式

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本融入其中。

转载于:https://my.oschina.net/ososchina/blog/350267