JS刷新框架内其他页面的七种方法及窗口刷新技巧汇总

JS刷新框架内页面示例

以三个页面为例，分别命名为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页面中需要实现刷新下方bottom.html页面的功能，可以使用以下七种JavaScript语句，具体选择可根据实际需求决定。

方法一：window.parent.frames[1].location.reload();

方法二：window.parent.frames.bottom.location.reload();

方法四：window.parent.frames.item(1).location.reload();

方法五：window.parent.frames.item('bottom').location.reload();

方法六：window.parent.bottom.location.reload();

方法七：window.parent['bottom'].location.reload();

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > top.html </ TITLE >
</ 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 >

以下是bottom.html页面的源代码，为了验证下方页面确实被刷新，页面加载时会弹出一个提示对话框。

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > bottom.html </ TITLE >
</ HEAD >
< BODY onload ="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=https://www.jb51.net">

其中20表示隔20秒后跳转到https://www.jb51.net页面。

3.页面自动刷新的JavaScript版本

<script language="JavaScript">

function myrefresh()

window.location.reload();

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script>

ASP.NET与窗口间刷新技巧

1.使用this.response.write("<script>opener.location.reload();</script>");

2.使用this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");

3.使用Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>")

//如何刷新包含该框架的父页面

<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 onload="opener.location.reload()"> 开窗时刷新

<body onUnload="opener.location.reload()"> 关闭时刷新

<script language="javascript">

window.opener.document.location.reload()

</script>