js返回上一页并刷新

更新日期: 2022-06-08阅读: 899标签: 刷新

返回上一页,我们经常用

history.go(-1)//返回上一页(括号中写-2代表返回上两页)
history.back()//返回上一页

有时候有这样的需求,我们在一个公共页面中进行了数据操作,操作完成之后用history.back()返回上一页,我们希望上一页的数据是改变的,但是由于是历史返回,上一页的数据还是历史数据,因此,我们用到了返回上一页并刷新。

self.location=document.referrer;

说到这里,有必要对self.location和document.referrer的应用做一下详细介绍了!


self.location应用

也是很久之前,我写了一篇网页防止黑客跨框架攻击的文章,里面用到了:

<style> html{ visibility:hidden; }</style>
<script>
if( self == top){
        document.documentElement.style.visibility='visible';
}else{
        top.location = self.location;
}
</script>

这里,我们应用到了一个self,其实,上面代码的实际作用就是防止别人用框架嵌套我们的网页,当然为了防止被人嵌入你的网页,也可以如下写:

if (top.location != self.location) {  
top.location=self.location;  
}  

解释

1、self:当前窗口对象(如果是在iframe里,则为该框架的窗口对象)
2、top:父窗口对象

当然,这些前面都可以添加一个window对象,也就是可以如下写:

window.self

功能:是对当前窗口自身的引用。它和window属性是等价的。

注:window、self、window.self是等价的。

window.top

功能:返回顶层窗口,即浏览器窗口。

注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。

window.parent

功能:返回父窗口。

回到上面的正题

self.location 相当于 window.self.location,自身的浏览器地址,在没有嵌套页面的时候也相当于window.location

也就是页面跳转到 document.referrer 下面就来说一下document.referrer


document.referrer

这个主要是获取前一个访问页面的URL地址。关于document.referrer的应用,除了上面的返回上一页,还有一个用途。用来做返回的跳转!(看到张鑫旭大神,前几天也写过类似这样的一个应用案例,好吧!我在这里再写一下!)

例如返回上一页的代码如下:

<a href="javascript:history.back()" class="goback"></a>

上面代码大部分是可以用的,但是有时候是不可以。微信分享进来直接是内页,没有上一页的情况,这个没有办法返回,点击是无效的!

针对这种情况,我们可以如下代码:

if (document.referrer === '') {
    // 没有来源页面信息的时候,改成首页URL地址
    $('.goback').attr('href', '/');
}

当没有来源的时候,返回改成首页,这样就是document.referrer的一个应用了!


document.referrer的浏览器兼容性问题

1、HTTPS默认会关闭referrer,需要通过meta来设置,设置方法如下:

<meta name="referrer" content="always">

2、直接在浏览器地址栏中输入地址;

3、使用location.reload()刷新(location.href或者location.replace()刷新有信息);

4、在微信对话框中,点击链接进入微信自身的浏览器;

5、扫码进入QQ或者微信的浏览器;

6、直接新窗口打开一个页面;

7、a标签设置rel="noreferrer"(兼容IE7+);

8、meta标签来控制不让浏览器发送referer; 例如:

<meta content="never" name="referrer">


链接: https://www.fly63.com/article/detial/11679

vue页面如何返回不刷新_ vue页面撤退不能返回到顶部的实现

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?1、使用vuex存储滚动状态,2、使用缓存keepAlive的实现

移动端下拉刷新头实现原理及代码实现

实现下拉刷新主要分为三步:监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY;监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于某个临界值时,显示下拉刷新头

vue实现局部刷新

使用2.2.0 新增的provide / inject控制<router-view>的显示隐藏,在App.vue中使用provide,在使用局部刷新的组件中使用inject

浏览器刷新事件的监听和使用

浏览器F5刷新的时候有一个刷新执行之前的事件,beforeunload 事件,这个事件可以提示用户在刷新页面之前有一个提示。下面是beforeunload的用法:

vue强制刷新子组件

把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种:一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。

解决使用vuex刷新页面state数据消失

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。

Vue 实现前进刷新,后退不刷新的效果

在一个列表页中,第一次进入的时候,请求获取数据。点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。

Vue 改变数据,页面不刷新的问题

最近在用 element-ui 开发一个网站,使用 table 组件时,发现修改完数据,有时候会延迟一两秒,页面才会发生变化。看了一下代码,发现修改数据的代码是这样的

Vue刷新当前页面的3种实现

缺点:同 this.$router.go(0) 一样,会白屏。通过 $nextTick(),协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。

vue项目如何刷新当前页面?

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!