编程技术

Document

网站开发进阶(二十六)js刷新页面方法大全_js刷新方法(1)

四、拓展阅读

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 onload="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> 


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

L 4.0 Transitional//EN"> 

<HTML> 

  <HEAD> 

  	<TITLE> top.html </TITLE> 

  </HEAD> 


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>![](https://img-blog.csdnimg.cn/img_convert/3a217bb0a82b51e98490f8ce4f913b39.webp?x-oss-process=image/format,png)