项目要求，产品的详情页打开，在首页上层显示，首页内容还能在详情的半透背景下隐约可见，但是如果要复制地址栏或者分享出去就要打开一个新的页面。在网上找些方法，发现花瓣网就是这样做的。跟后台同事商议后决定在首页做一个背景色半透的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事件
网友评论