巧用location.hash保存页面状态】的更多相关文章

在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果都回到了默认状态. 如果每次返回页面都要重新输入查询条件,或有甚者还得转到列表的第几页,那这种体验用户真的要抓狂了. 在我们的项目中,写了一个很简单的JavaScript基类来处理location.hash从而保存页面状态,今天在此就分享给大家. (本文的内容可能对于JavaScript初学者来讲有…
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分). 语法 location.hash 在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果都回到了默认状态. 如果每次返回页面都要重新输入查询条件,或有甚者还得转到列表的第几页,那这种体验用户真的要抓狂了. 在我们的项目中,写了一个很简单的JavaScript基…
hash 属性是一个可读可写的字符串,该字符串是URL的锚部分(从#号开始的部分).语法location.hash刚开始我真不知道hash有什么用,直到我在项目中遇上一个最大的问题.而且很恶心的体验 我的简单案例在我这个项目中,好多页面都是tab选项比如选项1 选项2 选项3 选项4 但我单击选项3 想看选项3的下面内容.我一刷新又恢复到选顶1 默认的效果.不能保存页面状态.为此我真被自己恶心到 ,也有替用户考虑过,毕竟我深有体会过用户是最好的体验.我在想刷新如何保存选项3和下面的内容呢,而不是…
需求场景:首页搜索内容,点击跳转至详情页,页面后退返回主页,保留搜索结果. 方案:路由参数:路由守卫 需求描述 在使用 Vue 开发前端的时候遇到一个场景:在首页进行一些数据搜索,点击搜索结果进入详情页面,浏览详情页后返回主页.但这时候之前的搜索记录和翻页就消失了,用户体验不好.所以需要在返回后恢复跳转前的页面参数状态. 当然如果条件允许,最简单的办法是点击搜索结果使用新页面打开(例如百度那样).但当前需求是一个完整的Vue开发的项目,并不是打开站外地址,而且详情的内容也不多,使用新页面不太合适…
/*本例是为了在客户端页面返回时保存状态,采用hash值记录的模式,为了使用方便所写的存取hash值的库,时间仓促,望指出错误.*/var pageStateHash = { hashArray: [], getHashArray: function() { var _self = this; if (window.location.hash.replace('#','') != '') { _self.hashArray = window.location.hash.replace('#','…
window.location.hash 页面跳转,精确定位,实例展示: (1).index.phtml,页面用于传参 <script id="bb_list_template" type="text/x-dot-template"> <a title="点击查看宝贝详情" href="<?php echo APP_WEB_INDEX_ROOT?>/item/itemdetail<?php echo…
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location.hash则可以用来获取或设置页面的标签值.比如http://domain/#admin的location.hash="#admin".利用这个属性值可以做一个非常有意义的事情. 很多人都喜欢收藏网页,以便于以后的浏览.不过对于Ajax页面来说的话,一般用一个页面来处理所有的事务,也就是说,…
本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下.   location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location.hash则可以用来获取或设置页面的标签值.比如http://domain/#admin的location.hash="#admin".利用这…
[转]http://www.cnblogs.com/nifengs/p/5104763.html location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location.hash则可以用来获取或设置页面的标签值.比如http://domain/#admin的location.hash="#admin".利用这个属性值可以做一个非常有意义的事情. window.…
在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性,地址栏上的资源路径没有被改变,随之而来的问题就是页面的状态无法被保存.这导致我们难以通过熟悉的方式(点击浏览器前进/后退按钮),在前后的页面状态间进行切换. 为了解决ajax页面状态不能返回的问题,人们想出了一些曲线救国的方法,比如利用浏览器hash的特性,将新的资源路径伪装成锚点,通过onhashcha…