精华内容
下载资源
问答
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2019-06-08 10:54:18
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: location.reload(); vue自带的路由跳转: ...

    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。

    1. 原始方法:
    location.reload();
    
    1. 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();
    
    展开全文
  • session过期之后刷新页面跳转到登陆页面的时候父页面不刷新,父页面里面包含登录的页面
  • js刷新页面方法大全 在项目开发过程中,需要实现刷新页面。经过学习,发现下面这条语句就可以轻松实现。 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:46
    AngularJs 刷新页面可采用下面的方式:首先先在控制器中注册$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:00
    Android刷新页面 继承 extends Activity/*** 调用onCreate(), 目的是刷新数据,从另一activity界面返回到该activity界面时, 此方法自动调用*/ @Override public void onResume() { super.onResume(); o...
  • uniapp跳转页面成功之后,刷新页面

    万次阅读 2019-08-27 16:04:47
    uni.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...
  • //刷新当前页面. parent.location.reload(); //刷新父亲对象(用于框架) opener.location.reload(); //刷新父窗口对象(用于单开窗口) top.location.reload(); //刷新最顶端对象(用于多开窗口) ...
  • 后端刷新和前端刷新页面的过程

    千次阅读 2018-10-16 21:05:47
    加粗样式对于服务器开发工程师来说,前段页面的刷新分 : 后端刷新和前端刷新 后端刷新的实现是通过模板加数据的方式实现的 ...不管是后端刷新还是前端刷新 ...1 后端刷新页面的流程 1.1 实现服务器的API接口文档...
  • 刷新页面通常是使用a链接与js刷新,至于两者在使用中的区别,在接下来的文章中有详细的介绍,感兴趣的朋友可以了解下 1.a链接的使用操作: 返回上一页 刷新当前页 #top的效果在我这没起作用,我直接写的刷新当前...
  • h5实现刷新页面

    万次阅读 2018-12-15 11:17:36
    window.location.reload(),window.history.go(0)和...Javascript刷新页面的几种方法:  1 history.go(0) 除非有&lt;%..%&gt;等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据 不刷新 2 ...
  • 解决-刷新页面Vuex数据丢失

    千次阅读 2020-07-02 15:02:33
    vue刷新页面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:13
    vue页面刷新页面数据不在的问题 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项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态 解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 ...
  • nc刷新页面

    千次阅读 2015-08-27 09:10:29
    nc刷新页面 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局部刷新页面、异步加载页面方案 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.向后台异步请求数据的方式刷新页面,后台返回一个jsp,来对需要刷新的控件赋值...
  • vue 修改数据刷新页面

    千次阅读 2019-05-24 14:18:42
    vue 项目中,如果更新一条...此时运用provide/inject 来局部刷新页面。 1.父组件中,定义reload 方法,其中有一个 isRouterAlive变量,定义在data中。 2.定义 provide,代码如下 export default { provide(){ ...
  • Thymeleaf动态刷新页面方法

    千次阅读 2020-03-17 21:17:07
    Thyemlef动态刷新页面方法 最近在做项目,后端使用SSM架构,前端使用thymeleaf和bootstrap架构,在作用过程中,需要页面局部刷新,用到了3种方法,分别进行一下介绍。 一、bootstrap模态框 在管理员界面对员工进行...
  • js刷新页面的重置

    千次阅读 2018-05-02 15:42:08
    js刷新页面后实现的功能,刷新页面的方法:1,reload 方法,该方法强迫浏览器刷新当前页面。语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以...
  • mui back 返回刷新页面

    千次阅读 2017-05-27 14:27:52
    mui back 返回刷新页面

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,240
精华内容 27,696
关键字:

刷新页面