用javascript实现页面的刷新

先来看一个简单的例子：下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。

frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下

1. frame.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3     <HEAD>
 4         <TITLE>frame</TITLE>
 5     </HEAD>
 6     <frameset rows="50%,50%">
 7         <frame name=top src="top.html">
 8         <frame name=bottom src="bottom.html">
 9     </frameset>
10 </HTML>

2. top.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE>top.html</TITLE>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </HEAD>
    <BODY>
        <input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>
        <input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>
        <input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>
        <input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>
        <input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br>
        <input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>
        <input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br>
    </BODY>
</HTML>

3. bottom.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>bottom.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body onload="alert('加载了')"> 
    This is my HTML page. <br>
  </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.wyxg.com"> 
 其中20指隔20秒后跳转到http://www.wyxg.com页面

3. 页面自动刷新js版

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

posted @ 2012-08-31 13:38 zdp072 阅读(205) 评论(0) 编辑收藏举报

刷新页面返回顶部

用javascript实现页面的刷新

公告