继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript的location对象和history对象

holdtom
关注TA
已关注
手记 1878
粉丝 240
获赞 992

一、location对象####

1、location是window和document的属性,window.location等价于document.location
2、包含的属性:hash、host(含端口号的主机名)、hostname(不含端口号的主机名)、href(等价于location.toString()方法)、pathname、port、protocol、search
3、方法
(1)assign(href):将浏览器的当前页面定位至href,同时在历史记录中生成一条记录,location.href=href、window.location、document.location有着同样的作用,示例:

location.assign("http://www.baidu.com");
location.href="http://www.baidu.com";window.location="http://www.baidu.com";document.location="http://www.baidu.com";

常用情况:将页面重新定位至站点的某个页面,如:检测到页面没有用户的cookie,就定位到登录页面;后台用户保存文章成功后,利用定时器在告诉用户保存成功后定位至用户后台首页;购物网站付款成功后,提醒用户多少秒后返回等等
(2)replace(href):与assign方法类似,但是并在历史记录中生成记录,也就是用户不能会退到上一个页面,这对用户来说是不友好的,不过购物网站付款成功后,提醒用户多少秒后返回这个场景适和
(3)reload([true]):重新加载当前页面,没有参数,则以最有效的方式加载,也就是很可能从缓存中加载,添加true参数后,强制从服务器中加载,因为有可能因为服务器或者网络的原因造成阻塞,应该将这个代码放在最后

二、history对象####

1、go(n):在用户的历史记录中任意跳转(这里的历史记录不同于浏览器设置中的历史记录,而是当前标签页的历史记录),n是一个数字,负数表示后退,正数表示前进,例如在后台中的返回按钮就很能用上:

history.go(-1);

2、back()和forward()的方法是对go(-1),forward(1)方法的简写。
3、length属性保存着历史记录的记录数量(依旧是指当前标签页,数量包含当前页面)

三、使用实践####

1、用户返回上个页面并刷新,刷新的原因有很多,例如上个页面需要请求数据库中的信息,这样就可以保证用户看到的最新的数据信息了

<a href="javascript:history.go(-1);location.reload()">返回</a>

JavaScript刷新页面的方法:

history.go(0);
location.reload(); 
location=location;
location.assign(location);document.execCommand('Refresh');window.navigate(location);
location.replace(location);document.URL=location.href;

         

             




作者:忽如寄
链接:https://www.jianshu.com/p/1d857786c64a


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP