设置hash后导致的返回问题的解决方案

引: 通常,在写移动端页面的时候,如果遇上很多需要切换的tab,比如切换城市/类目等,都会发起一次异步的请求,请求数据加载出来后,当点击某个具体的产品后,页面将会跳转到一个新的地方,我们希望用户在浏览完这个产品之后,可以返回到原来的地方,而返回的地方是上一次用户选择的条件的页面---这时候,hash就排上用场了。

设置hash:

  设置hash的方法很简单。通过window.location.hash可以获取到url上的hash值,也可以通过赋值动态地给hash赋值,代码可以如下

var hash  = window.location.hash.slice(1);

  由于通过window.location.hash获取到的hash是"#xxx"的格式,所以要获取hash的具体值可以通过字符截取,通过slice可以实现。

  ps:hash值的设置有以下几种集中方式,如果hash是number型,可以不需要带#,如果设置字符串,也可以不加#,但是如果加上#就一定要按照字符串来设置。如以下几种都是正确的设置hash的方式

window.location.hash = 1111;  //number型
window.location.hash = "1111"; //string型,不加#
window.location.hash = "#1111" ;//string型,加#

存在的问题:

  当你在一个页面中无刷新的情况下,通过脚本(js)频繁地设置了hash值,你会发现,返回的时候,返回到你设置的上一次hash的地址,但是页面并没有刷新,这时候,你会发现这并不是你想要的(这种恶心的结果在你设置了很多次hash的情况下尤为恶心),你可能想回到的是从某个地方跳转过来的地方。这时候,可以通过document.location.replace强行把hash历史去掉,实现想要的功能。

  

getFilterUrl: function(hash) {
        return document.location.protocol + ‘//‘ + document.location.host + document.location.pathname + document.location.search + ‘#‘ + hash;
}

  然后,使用的时候可以这样:

var hash = "xxxx"; //这个hash自己通过具体的需求设置
document.location.replace(this.getFilterUrl(hash));
  

  如此这般,就可以解决页面返回的业务需求。

  

时间: 2024-11-14 05:15:21

设置hash后导致的返回问题的解决方案的相关文章

实际iOS编程中遇到的自定义导航栏按钮,导致手势返回失效的解决方法

1\在实际编程过程中往往需要自定义导航栏上面的按钮,也就用: - (instancetype)initWithCustomView:(UIView *)customView; 但用了这个方法后可能会导致iOS7,8的手势返回失效,解决方法就是在自定义的导航栏的viewDidLoad方法中添加如下代码 注意:只有用系统的导航栏,或者继承于系统的导航栏才可以用Push方法,并且自带返回手势. - (void)viewDidLoad { [super viewDidLoad]; __weak type

MVC导出数据到EXCEL新方法:将视图或分部视图转换为HTML后再直接返回FileResult

MVC导出数据到EXCEL新方法:将视图或分部视图转换为HTML后再直接返回FileResult 导出EXCEL方法总结:MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可:优点:可设置丰富的EXCEL格式,缺点:需要依赖EXCEL组件,且EXCEL进程在服务器中无法及时关闭,以及服务器上会存留大量的不必要的XLS文件: 2.设置输出头为:application/ms-excel,再输出拼接的HTM

ORA-00064 processes设置过大导致数据库打不开

processes设置过大导致数据库打不开 在processes设置过大后,可能导致数据库打不开,开启数据库后会报错: SQL> startup ORA-00064: object is too large to allocate on this O/S (1,7746920) SQL> 解决办法: 首先找到pfile位置,然后从pfile启动数据库; startup pfile=$ORACLE_BASE/admin/SID/pfile/init.ora.49201715235' pfile一

虚拟机下Linux虚拟机克隆后导致克隆体不能上网问题!

虚拟机下Linux虚拟机克隆后导致克隆体不能上网问题! 由于虚拟机克隆导致系统保留原来网卡信息和克隆后的新虚拟网卡发生重复,因为系统配置文件只识别eth0这张虚拟网卡,而ifconfig -a查看的信息上面显示虚拟网卡为eth1,而又克隆体上的虚拟网卡eth0(/etc/sysconfig/networkscripts/ifcfg-eth0)上的设置是母体的虚拟机设置,所以导致系统不匹配该网卡信息,从而不能上网. 解决方法: 1.修改系统文件: vi /etc/udev/rules.d/70-p

PHP设置头信息,取得返回头信息

php 设置头信息,取得返回头信息 张映 发表于 2011-05-27 分类目录: php 设置请求的头信息,我们可以用header函数,可以用fsockopen,可以用curl等,本文主要讲的是用curl来设置头信息,并取得返回后的头信息. 一,请求方设置自己的头信息,header.php 查看复制打印? <?php function FormatHeader($url, $myIp = null,$xml = null) { // 解悉url $temp = parse_url($url);

[BS-10] 统一设置app所有页面的“返回”按钮样式

统一设置app所有页面的“返回”按钮样式 如果想统一设置app所有页面的“返回”按钮样式,首先自定义WZNavigationController类继承UINavigationController类,然后在自定义类中重写pushViewController: animated:方法即可. //重写navC的pushVC方法,以便统一设置push进来的vc的左侧“返回”按钮 - (void)pushViewController:(UIViewController *)viewController a

Visual Studio 2012安装VASSISTX插件后导致CPU高的解决办法

笔者一直都喜欢用VAX插件来做C++的开发,但发现VS2012安装了VAX后,CPU占用超级高,有时界面卡死得非常厉害.我卸了又装,升级最新版,都不管用. 直到有天,看到网友说:VS2012的sdf文件和pch文件夹很大,可以设置个临时目录进行存放,以便及时删除而节约硬盘空间.所以我也跟着做了如下设置: 在选项->文本编辑器->C/C++->高级里,把回退位置设为TRUE,并指定了回退位置的保存文件夹. 设置完后,我突然发现工程不会再让CPU跑到50%以上,连续开了3个VS工程,也都运行

Winform中设置ZedGraph因设置小刻度导致的竖直虚线显示过多

场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100112573 https://www.cnblogs.com/badaoliumangqizhi/p/11422087.html 在上面对ZedGraph的属性进行设置后导致曲线图出现众多竖直虚线. 实现 这是因为对ZedGraph设置了小刻度,将其设置为false即可. ZedGraphCont

setLayoutParams设置leftMargin后在模拟器上可以真机上不行

LinearLayout.LayoutParams lp = getLayoutParamsFromExit( (LayoutParams) this.getLayoutParams());             this.setLayoutParams(lp); 如果是内部访问setLayoutParams,可以通过设置getLayoutParams()得到的对象,如果是外部访问setLayoutParams,需要new出来的而不能用 getLayoutParams()得到的一个. setL