Home > Web Front-end > JS Tutorial > Seven ways to refresh frame subpages in JavaScript (summary)

Seven ways to refresh frame subpages in JavaScript (summary)

青灯夜游
Release: 2018-10-11 15:01:30
forward
4501 people have browsed it

This article introduces seven methods for refreshing frame subpages in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The following takes three pages named framedemo.html, left.html, and right.html as an example to explain how to do it.

The framedemo.html consists of two pages, the left and right. The code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
< HTML>
< HEAD>
< TITLE> frameDemo </TITLE>
< /HEAD> 
< frameset cols="200,*">
< frame name=top src="left.html">
< frame name=button src="right.html">
< /frameset>
< /HTML>
Copy after login

Now assuming that left.html, the page above, has a button to refresh the page below, you can use the following There are seven types of statements, it’s up to you which one is easier to use.

//语句1
window.parent.frames[1].location.reload();

//语句2
window.parent.frames.bottom.location.reload();

//语句3
window.parent.frames["bottom"].location.reload();

//语句4
window.parent.frames.item(1).location.reload();

//语句5
window.parent.frames.item(&#39;bottom&#39;).location.reload();

//语句6
window.parent.bottom.location.reload();

//语句7
window.parent[&#39;bottom&#39;].location.reload();
Copy after login

Explain:

1.window refers to the current page, for example, in this example it refers to the top.html page.

2.parent refers to the parent page of the current page, which is the frame page that contains it. For example, for this example it refers to framedemo.html.

3.frames is a window object and an array. Represents all subpages within the frame.

4.item is a method. Returns the elements in the array.

5. If the subpage is also a frame page with other subpages inside, then some of the above methods may not work.
top.html source code; (There are seven buttons on the page, the functions of which are to refresh the frame page below)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
< HTML>
< HEAD>
< /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[&#39;bottom&#39;].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(&#39;bottom&#39;).location.reload()"><br>
< input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>
< input type=button value="刷新7" onclick="window.parent[&#39;bottom&#39;].location.reload()"><br>
< /BODY>
< /HTML>
Copy after login

The following is the source code of the right.html page, in order to prove that the page below has indeed been refreshed , a dialog box pops up after the page is loaded.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
< HTML>
< HEAD>
< /HEAD>
< BODY onload="alert(&#39;我被加载了!&#39;)">
< h1>This is the content in button.html.</h1>
< /BODY>
< /HTML>
Copy after login

After my test, only 1 and 4 can display the effect, and the others seem to be wrong
======================== =====

Attachment:
Several ways to refresh the page using 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

Method to automatically refresh the page:

1. Automatically refresh the page: Add the following code to the area

<meta http-equiv="refresh" content="20">
Copy after login

where 20 means to refresh the page every 20 seconds.

2. The page automatically jumps: add the following code to the area

<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">
Copy after login

where 20 means jumping to the http://www.wyxg.com page after 20 seconds

3. The page automatically refreshes the js version

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

How does ASP.NET output the refresh parent window script statement

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(&#39;&#39;你要刷新的页.asp&#39;&#39;);</script>")
Copy after login

JS Script statement to refresh the frame

//如何刷新包含该框架的页面用   
< 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>
Copy after login

If you want to refresh when the window is closed or you want to refresh when the window is opened, just call the following statement in .

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

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

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial!

Related recommendations:

php public welfare training video tutorial

JavaScript graphic tutorial

JavaScriptOnline Manual

The above is the detailed content of Seven ways to refresh frame subpages in JavaScript (summary). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template