30no2's Blog.

js页面自动刷新,再也不用f5了

字数统计: 408阅读时长: 1 min
2017/11/07 Share

js页面自动刷新,再也不用f5了

  我们在前端开发的过程中,经常会遇到这种事情,修改完一处之后想要看到效果,不得不刷新页面,如果经常性的这样重复工作,不免会让人很烦躁。。。。。。前端怎么能这么无趣。

福利来了。。。
用js就可以简单实现

页面自动刷新代码

head部分

<meta http-equiv="refresh" content="20">  

将上面代码加到head区,20是指20秒  

页面跳转

<meta http-equiv="refresh" content="20;url=http://www.xxxx.com">  
上面的代码是说20秒后跳转到xxxx的页面  

js页面自动刷新

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

js刷新框架

  1. 刷新包含该框架的页面用
<script language=JavaScript>
    parent.location.reload();
</script>  
  1. 子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>

或者:

<a href="javascript:opener.location.reload()">刷新</a> 
  1. 刷新另一个框架的页面
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
  1. 关闭或者打开窗口的时候刷新
<body onload="opener.location.reload()">开窗时刷新
<body onUnload="opener.location.reload()">关闭时刷新

<script language="javascript">
    window.opener.document.location.reload()
</script>

小结:

可能有人会说我用的sublime,有插件很好用LiveReload 

  配置教程传送

可是有很多的人用的别的开发工具,用
记事本
的飘过。。

++最后要说我分享我快乐!!++
CATALOG
  1. 1. js页面自动刷新,再也不用f5了
    1. 1.1. 页面自动刷新代码
      1. 1.1.1. head部分
      2. 1.1.2. 页面跳转
      3. 1.1.3. js页面自动刷新
      4. 1.1.4. js刷新框架
      5. 1.1.5. 小结: