html5 的 historyAPI

      项目要求,产品的详情页打开,在首页上层显示,首页内容还能在详情的半透背景下隐约可见,但是如果要复制地址栏或者分享出去就要打开一个新的页面。在网上找些方法,发现花瓣网就是这样做的。跟后台同事商议后决定在首页做一个背景色半透的div 来异步写入详情页的内容,用htm5的history属性来改变地址栏的信息。

        点击商品详情链接时发送ajax请求,把得到的页面信息写入div中,history.pushState()方法改变浏览器的url,新的状态信息也会被加入历史状态栈;

        点击后退按钮时会触发window的popstate事件,在触发posstate事件时再把装详情页面内容的div设为隐藏,点击关闭按钮时隐藏div并把url改为首页的url。


pushState():接收3个参数:状态对象、新的状态的标题和url

第一个参数尽可能提供初始化页面状态所需的信息,第二个参数暂时还没有实现可设为空

更新当前状态可调用replaceState(),传入参数与pushState()的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态,只会重写当前状态。

hashchange事件

之所以新增这个事件,Ajax的应用中,开发人员经常要利用url参数来保存状态或导航信息。

url参数列表只要变化就会调用window的hashchange事件


     


你可能感兴趣的:(html5 的 historyAPI)