JavaScript 返回上一页和刷新页面

1.window.location.reload();刷新当前页
2.window.history.go(-1);返回上一页
3.window.history.back();返回上一页
window.history.back();后退后返回的不只是前一个页而是前一个页的状态。如果一个页我修改了3次那必须后退3次才能回到前一个页。而且数据库中删除的数据依然显示在上面感觉非常的不实用。
解决办法:history.back()后再加一个reload()这样就可以回到刷新后的页面了
即:history.back();location.reload();如果有框架即在前面加上该框架名即可
4.document.referrer;返回上一级页面并刷新
做微商城的时候遇到一个这样的问题,选择收货地址时点击添加地址跳转到添加地址页,地址添加完毕想跳转到上一页,返回上一页后需要刷新数据, window.location.href=document.referrer;
5.在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL、domain和referrer,
URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL。
前面两个很好理解,而referrer属性简单来说就是上一个页面的URL。
如下:返回上一个页面按钮
在这里插入图片描述

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面,也可以写成history.go(-1)
};
// 或者
<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

虽说感觉上面这样已经基本上实现了返回上一页的功能,但是有一种情况没有考虑到,就是假如该页面是别人分享过来的而不是通过其他页面进入的呢?那么点击该按钮将不会有任何反应,因为此时history对象中不存在历史记录,也就是说这是你浏览器窗口打开时浏览的第一个页面。为了优化用户体验,这里通常有两种解决方案。一种是在打开第一个页面时不显示返回上一页按钮,另一种是点击直接跳转到网站首页,这可以根据产品需求来选择合适的方案。
这里假设选择第一种方案,我们可以这样写段JS:

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏,当referrer属性不为空时让其显示
}
//分享页 返回上一页
if (typeof document.referrer === '') {
 // 没有来源页面信息的时候,改成首页URL地址
 $('.jsBack').attr('href', '/');
}

其实判断当前页面是否是用户一开始打开的页面,方法也不止通过判断referrer属性这一种方法,还可以通过history.length是否为零来判断。
转:https://www.cnblogs.com/zhangqie/p/8137047.html
转:https://www.jianshu.com/p/2137a778dffe

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 iframe 中返回一页面时,如果不想刷新一页面,可以使用以下方法: 1. 使用 history.pushState() 方法 在 iframe 中返回一页面时,可以使用 JavaScript 的 history.pushState() 方法修改浏览器历史记录,从而避免刷新一页面。例如,你可以在子页面中添加以下代码: ```javascript history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); ``` 上述代码会在子页面中执行,它会在浏览器历史记录中添加一个新的状态,并且监听 popstate 事件,当用户点击浏览器的后退按钮时,再次调用 pushState() 方法,从而保持历史记录不变。这样就可以实现在 iframe 中返回一页面时不刷新一页面的效果。 2. 使用 session storage 另一种方法是使用 session storage,在子页面中保存一个标识符,当返回一页面时,检查标识符是否存在,如果存在则不刷新一页面。例如: 在子页面中添加以下代码: ```javascript sessionStorage.setItem('noRefresh', '1'); ``` 在父页面中添加以下代码: ```javascript window.addEventListener('popstate', function () { var noRefresh = sessionStorage.getItem('noRefresh'); if (noRefresh === '1') { sessionStorage.removeItem('noRefresh'); return; } location.reload(); }); ``` 上述代码会在子页面中设置 sessionStorage,当返回一页面时,父页面会检查 sessionStorage 中是否存在标识符,如果存在则不刷新页面,否则刷新页面。这样就可以实现在 iframe 中返回一页面时不刷新一页面的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值