-
Vue刷新页面的三种方式
2019-06-08 10:54:18我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。 原始方法： location.reload(); vue自带的路由跳转： ...展开全文我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。
- 原始方法：
location.reload();- vue自带的路由跳转：
this.$router.go(0);用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。
所以，我们选择第三种方式：
3. 首先在App里面写下如下代码：<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide () { //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。 return { reload: this.reload } }, data() { return{ isRouterAlive: true //控制视图是否显示的变量 } }, methods: { reload () { this.isRouterAlive = false; //先关闭， this.$nextTick(function () { this.isRouterAlive = true; //再打开 }) } }， } </script>接下来，我们就可以在需要刷新页面的组件里这样写：
export default { inject:['reload'], //注入App里的reload方法 data () { return { ....... } },在需要刷新页面的代码块中使用：
this.reload();
-
iframe刷新页面时不刷新父页面
2015-11-19 04:00:51session过期之后刷新页面跳转到登陆页面的时候父页面不刷新,父页面里面包含登录的页面 -
-
网站开发进阶(二十六)js刷新页面方法大全
2016-01-01 12:08:49js刷新页面方法大全 在项目开发过程中,需要实现刷新页面。经过学习，发现下面这条语句就可以轻松实现。 location.reload(); //刷新页面 有关刷新页面的其它方法，具体学习内容如下，有需要的朋友可以参考下。 ...展开全文js刷新页面方法大全
在项目开发过程中,需要实现刷新页面。经过学习，发现下面这条语句就可以轻松实现。
location.reload(); // 刷新页面
有关刷新页面的其它方法，具体学习内容如下，有需要的朋友可以参考下。
本文介绍下，用js刷新当前页面的几种方法，包括reload方法、replace方法、自动刷新方法等。
如何实现刷新当前页面呢？借助js你将无所不能。
1. reload 方法
该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])
参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")
2. replace 方法
该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
语法： location.replace(URL)
通常使用： location.reload() 或者是 history.go(0) 来做。
此方法类似客户端点F5刷新页面，所以页面method="post"时，会出现"网页过期"的提示。
因为Session的安全保护机制。
当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。
如果有这种应用： 需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。
这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
代码： location.replace(location.href);
返回并刷新页面：
location.replace(document.referrer);
document.referrer //前一个页面的URL
不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。
附：
Javascript刷新页面的几种方法：
代码如下:
history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href
自动刷新页面的方法
1. 页面自动刷新
把如下代码加入<head>区域中
代码如下:
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2. 页面自动跳转
把如下代码加入<head>区域中
代码如下:
<meta http-equiv="refresh" content="20;url=http://www.jb51.net">
其中20指隔20秒后跳转到http://www.jb51.net页面
3. 页面自动刷新js版
代码如下:
<script language="JavaScript"> function myrefresh() { window.location.reload(); } setTimeout('myrefresh()',1000); //指定1秒刷新一次 </script>4. JS刷新框架的脚本语句
代码如下:
//刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>
//子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a> )
//刷新另一个框架的页面用
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
如果想关闭窗口时刷新或想开窗时刷新，在<body>中调用以下语句即可。
代码如下:
<body οnlοad="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>
一、先来看一个简单的例子：
下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。
frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下：
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frame </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name=top src="top.html">
<frame name=bottom src="bottom.html">
</frameset>
</HTML>
现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。
top.html 页面的代码如下：
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> top.html </TITLE>
</HEAD>
<BODY>
<input type=button value="刷新1" οnclick="window.parent.frames[1].location.reload()"><br>
<input type=button value="刷新2" οnclick="window.parent.frames.bottom.location.reload()"><br>
<input type=button value="刷新3" οnclick="window.parent.frames['bottom'].location.reload()"><br>
<input type=button value="刷新4" οnclick="window.parent.frames.item(1).location.reload()"><br>
<input type=button value="刷新5" οnclick="window.parent.frames.item('bottom').location.reload()"><br>
<input type=button value="刷新6" οnclick="window.parent.bottom.location.reload()"><br>
<input type=button value="刷新7" οnclick="window.parent['bottom'].location.reload()"><br>
</BODY>
</HTML>
下面是bottom.html页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bottom.html </TITLE>
</HEAD>
<BODY οnlοad="alert('我被加载了！')">
<h1>This is the content in bottom.html.</h1>
</BODY>
</HTML>
解释一下：
代码如下:
1.window指代的是当前页面，例如对于此例它指的是top.html页面。
2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。
3.frames是window对象，是一个数组。代表着该框架内所有子页面。
4.item是方法。返回数组里面的元素。
5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。
附：
Javascript刷新页面的几种方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
二、自动刷新页面
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=http://www.jb51.net">
其中20指隔20秒后跳转到http://www.jb51.net页面
3.页面自动刷新js版
[注:如需引入外部Js需刷新才能执行]
三、java在写Servler,Action等程序时，要操作返回页面的话（如谈出了窗口，操作完成以后，关闭当前页面，刷新父页面）
代码如下:
1 PrintWriter out = response.getWriter();
2 out.write("<script type=\"text/javascript\">");
3 子窗口刷新父窗口
4 out.write("self.opener.location.reload();");
5 //关闭窗口
6 out.write("window.opener=null;");
7 out.write("window.close();");
8 out.write("</script>");
四、JS刷新框架的脚本语句
1.如何刷新包含该框架的页面用
代码如下:
<script language=JavaScript>
parent.location.reload();
</script>
2.子窗口刷新父窗口
复制代码 代码如下:
<script language=JavaScript>
self.opener.location.reload();
</script>
3.如何刷新另一个框架的页面用 （上面的实例以说明了）
代码如下:
语句1. window.parent.frames[1].location.reload();
语句2. window.parent.frames.bottom.location.reload();
语句3. window.parent.frames["bottom"].location.reload();
语句4. window.parent.frames.item(1).location.reload();
语句5. window.parent.frames.item('bottom').location.reload();
语句6. window.parent.bottom.location.reload();
语句7. window.parent['bottom'].location.reload();
4.如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body οnlοad="opener.location.reload()">
开窗时刷新
<body onUnload="opener.location.reload()">
关闭时刷新
代码如下:
<script language="javascript">
window.opener.document.location.reload()
</script>
-
刷新页面回到页面顶部
2017-10-24 15:57:01这个事件是在用户关闭页面之前和刷新页面时触发： 里面的两行代码为：刷新页面时就让网页从头显示。scrollTop有兼容性，请将兼容性写完整，保证各个浏览器之间的正常执行。 window.onbeforeunload = function展开全文点击浏览器的刷新按钮刷新
我们在做前端网站的时候往往会遇到用户点击刷新的行为，下面这个事件是JS为用户点击刷新按钮时触发的事件。 这个事件是在用户关闭页面之前和刷新页面时触发： 里面的两行代码为：刷新页面时就让网页从头显示。scrollTop有兼容性，请将兼容性写完整，保证各个浏览器之间的正常执行。 window.onbeforeunload = function(){ document.documentElement.scrollTop = 0; //ie下 document.body.scrollTop = 0; //非ie }
-
vue跳转页面后刷新页面
2019-01-30 10:22:43跳转页面 使用router-link 刷新页面 在router-link页面中写方法refresh 新页面取参数展开全文跳转页面
使用router-link
刷新页面
在router-link页面中写方法refresh
新页面取参数
-
AngularJs 刷新页面
2017-01-17 15:51:46AngularJs 刷新页面可采用下面的方式：首先先在控制器中注册$window，然后定义函数$scope.reloadRoute，在需要刷新页面的地方调用函数$scope.reloadRoute即可。 $scope.reloadRoute = function () { $window.... -
浏览器刷新页面
2020-05-19 00:05:04--每五秒刷新一次当前页面--> <meta http-equiv="refresh" content="5" /> <!--五秒后跳转到指定地址--> <meta http-equiv="refresh" content="5;url=https://www.baidu.com/" /> 方法二： ... -
Android刷新页面
2017-12-12 14:31:00Android刷新页面 继承 extends Activity/*** 调用onCreate(), 目的是刷新数据,从另一activity界面返回到该activity界面时, 此方法自动调用*/ @Override public void onResume() { super.onResume(); o... -
uniapp跳转页面成功之后，刷新页面
2019-08-27 16:04:47uni.switchTab({ url: '/pages/home/index', success(){ let page = getCurrentPages().pop(); //跳转页面成功之后 if (!page) return; page.onLoad(); //如果页面存在，则重新刷新页面 } }... -
Vue 路由切换时页面刷新页面
2019-11-28 19:55:32问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>： <template> <div id="app"> <keep-alive> <router-view... -
jq 刷新页面，刷新父级页面，iframe刷新父级页面
2019-08-29 11:39:37//刷新当前页面. parent.location.reload(); //刷新父亲对象（用于框架） opener.location.reload(); //刷新父窗口对象（用于单开窗口） top.location.reload(); //刷新最顶端对象（用于多开窗口） ... -
后端刷新和前端刷新页面的过程
2018-10-16 21:05:47加粗样式对于服务器开发工程师来说，前段页面的刷新分 ： 后端刷新和前端刷新 后端刷新的实现是通过模板加数据的方式实现的 ...不管是后端刷新还是前端刷新 ...1 后端刷新页面的流程 1.1 实现服务器的API接口文档... -
a链接刷新页面与js刷新页面用法示例介绍【HTML几种常用返回页面方法】
2016-08-03 10:39:01刷新页面通常是使用a链接与js刷新，至于两者在使用中的区别，在接下来的文章中有详细的介绍，感兴趣的朋友可以了解下 1.a链接的使用操作： 返回上一页 刷新当前页 #top的效果在我这没起作用，我直接写的刷新当前... -
h5实现刷新页面
2018-12-15 11:17:36window.location.reload()，window.history.go(0)和...Javascript刷新页面的几种方法： 1 history.go(0) 除非有<%..%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据 不刷新 2 ... -
解决-刷新页面Vuex数据丢失
2020-07-02 15:02:33vue刷新页面vuex数据丢失 vuex数据丢失 vue刷新页面 -
小程序里页面后退怎么刷新页面
2018-12-06 13:42:16即后退刷新页面。 刚开始以为是书写顺序，检查好几遍发现不是，根本原因是页面在返回之后没有刷新。那么怎么解决，查了好多资料。 其实咱们小程序不存在页面刷新，只需要掌握好生命周期，那这个问题就OK了。 比如... -
刷新页面和自动刷新页面
2006-06-22 10:00:00刷新本页面：代码：刷新自动刷新页面：在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间，以秒为单位。targer.html为你想转向的目标页,若为... -
vue页面刷新页面数据不在的问题
2019-05-28 18:04:13vue页面刷新页面数据不在的问题 vue页面跳转通过parmas携带的参数在新页面里一刷新就会丢失， 1.使用sessionStorage保存页面要用到的数据无论页面怎么刷新数据都不会丢失 传参数的页面设置 xiang(row) { this.id ... -
js刷新页面的几种方法
2019-05-14 10:35:34在前端开发过程中，我们经常需要通过刷新当前的页面来实现某些功能，一起来了解下前端刷新页面有哪些方式呢？ reload刷新法 reload方法，用来强制浏览器刷新当前页面。语法： loaction.reload([bForceGet]) 参数：... -
微信小程序 刷新页面
2018-09-05 15:45:28刷新页面，其实就是刷新页面上的数据。一般页面数据加载函数都写在 onLoad 或者 onShow 的回调函数中。所以我们只要获取当前页面，完后手动调用这两个函数即可 let pages = getCurrentPages() //获取页面数组 let ... -
vue 项目刷新页面, 保留当前页面状态
2020-02-27 20:24:03问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态 解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 ... -
nc刷新页面
2015-08-27 09:10:29nc刷新页面 private void refreshSingle(Object obj) throws Exception { if (obj != null) { AbstractBill oldVO = (AbstractBill) obj; String pk = oldVO.getParentVO().getPr -
小程序跳到tabTar页面刷新页面
2019-06-03 17:30:47小程序跳转到tabBar页面是不...这里就要刷新页面。 B页面不是tabBar里的页面 click:function(){ getApp().globaData.name='张三' wx.switchTab({ url:'../index/index', success:function(){ var page=get... -
jsp局部刷新页面、异步加载页面方案
2017-01-24 11:13:49jsp局部刷新页面、异步加载页面方案 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面：aaa.jsp（用来放置需要刷新的内容） 3.向后台异步请求数据的方式刷新页面，后台返回一个jsp，来对需要刷新的控件赋值... -
vue 修改数据刷新页面
2019-05-24 14:18:42vue 项目中，如果更新一条...此时运用provide/inject 来局部刷新页面。 1.父组件中，定义reload 方法，其中有一个 isRouterAlive变量，定义在data中。 2.定义 provide，代码如下 export default { provide(){ ... -
Thymeleaf动态刷新页面方法
2020-03-17 21:17:07Thyemlef动态刷新页面方法 最近在做项目，后端使用SSM架构，前端使用thymeleaf和bootstrap架构，在作用过程中，需要页面局部刷新，用到了3种方法，分别进行一下介绍。 一、bootstrap模态框 在管理员界面对员工进行... -
js刷新页面的重置
2018-05-02 15:42:08js刷新页面后实现的功能，刷新页面的方法：1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以... -
mui back 返回刷新页面
2017-05-27 14:27:52mui back 返回刷新页面
