美文网首页
前端页面刷新

前端页面刷新

作者: 清平乐啊 | 来源:发表于2020-12-04 12:53 被阅读0次

1.setTimeout定时刷新

<script>setTimeout("location.href='url'",2000)</script>
注释:url是要刷新的页面URL地址
2000是等待时间2000ms

<script language="JavaScript">
function myrefresh()
{
   window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1000ms刷新一次
</script>

2.window.location

(1)window.location.assign()
window.location.assign(newURL)
window.location=newURL
当newURL为当前URL则刷新当前页面
window.location.assign(location)
window.location=location
location=location(省略window写法)
(2)window.location.reload()
重新载入当前文档,用于刷新当前文档,类似于在浏览器上的刷新页面按钮(F5刷新)
window.location.reload(true)
无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档(shift+F5强制刷新)
(3)window.location.replace()
重定向到新页面(浏览器url无前进后退按钮)
window.location.replace(newURL)
刷新当前页面
window.location.replace(location)
--location其他方法,无刷新当功能:
详情请参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location
(4)window.location.search()
(5)window.location.hash()

3.window.history.go(0)

history.go()(省略window写法,刷新当前页面)

4.window.navigate()

window.navigate(location)方法是针对IE的,不适用于firefox

5.document.execCommand()

document.execCommand('Refresh')
document.execCommand('refresh')
firefox已经废弃document.execCommand()方法

6.document.URL

document.URL=location.href
该属性的值和DOM Level 0中的document.location.href 属性的值是相等的.然而 document.location.href 是可写的, document.URL 是只读的

7.<meta>

<meta http-equiv="refresh" />
如果 content 只包含一个正整数,则为重新载入页面的时间间隔(秒);
如果 content 包含一个正整数,并且后面跟着字符串 ';url=' 和一个合法的 URL,则是重定向到指定链接的时间间隔(秒)
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
3秒后重定向到https://www.mozilla.org

8.vuejs刷新当前页面

(1)window.reload(),location. reload()
(2)router.go(0),this.$router.go(0)
以上都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新,整个页面重新加载,会出现一个瞬间的空白页面,体验不好
(3)provide / inject 组合 方式
A:在App.vue页面添加
dom:
<router-view v-if="isRouterAlive"></router-view>
js:

export default{
provide(){
   return {
     reload:this.reload
 }
},
data(){
  return {
    isRouterAlive:true
  }
},
methods:{
reload(){
this.isRouterAlive=false
  this.$nextTick(()=>{
   this.isRouterAlive=true
  })
 }
}
}

B:在当前需要刷新的页面

export default{
inject:['reload'],
}

在需要刷新的时候调用:
this.reload()

相关文章

  • 前端页面刷新

    1.setTimeout定时刷新 setTimeout("location.href='url'",2000) 注...

  • vue router 路由专题

    一、前端路由前端路由的核心是改变url 但是页面不进行整体的刷新如何实现改变url 但是不刷新整个页面方法一:通过...

  • 前端路由

    什么是前端路由 前端路由的前生今世及实现原理 先有的SPA,页面内部交互无刷新,再到页面跳转也无刷新,因此路由出现了

  • flask 数据通信的流程 前后端刷新的方法

    flask 数据通信的流程 前后端刷新的方法 对于服务器开发工程师来说, 前端页面的刷新分:1、后端刷新2、前端刷...

  • 前端定时定点轮询

    需求:每天凌晨1点前端页面刷新 实现方法(一) 实现方法(二)

  • 【chrome extensions course】7.页面自动

    前端在开发页面的时候,很多时候为了看效果,需要改完以后刷新页面。今天的案例是实现页面的自动刷新。今天的主角就是co...

  • 前端页面分页加载刷新

    [注:来源:时间较久,忘记了框架:thinkPHP] 1、css 样式 2、work.html 3.js 4.Wo...

  • 页面刷新

    前端datatable 中 子窗体关闭,父窗体页面刷新 table.draw(false); 示例:$('#tab...

  • 前端框架选型

    前端框架选型 bootstrap:怎么定制UI 路由:URL变化了,不刷新页面么

  • angular6 相同页面跳转参数不同 页面不刷新问题解决

    最近做前端配置化查询页面时,多个查询配置为相同路由对应的同一个页面,只是参数不同,相同页面跳转时,出现了页面不刷新...

网友评论

      本文标题:前端页面刷新

      本文链接:https://www.haomeiwen.com/subject/mjabwktx.html