Home > Web Front-end > JS Tutorial > Several methods of page refresh using javascript

Several methods of page refresh using javascript

一个新手
Release: 2017-09-07 15:02:50
Original
1715 people have browsed it

Several JavaScript page refresh methods

The following is an example of three pages named frame.html, top.html, and bottom.html. Be specific about how to do it.
frame.html consists of two pages: top (top.html) and bottom (bottom.html). The code is as follows:

Copy code The code is as follows:

<!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>
Copy after login

Now assume that top.html (i.e. the page above) has seven buttons. To refresh bottom.html (the page below), you can use the following seven statements. It’s up to you which one is easier to use. The code of the
top.html page is as follows:
Customized code The code is as follows:

<!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[&#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 bottom.html page source code. In order to prove that the page below has indeed been refreshed, a dialog box pops up after the page is loaded.

##Copy code The code is as follows:

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

Explain:
Copy code The code is as follows:

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.
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(&#39;Refresh&#39;) 
6 window.navigate(location) 
7 location.replace(location) 
8 document.URL=location.href
Copy after login

2. Automatically refresh the page1. Page automatically Refresh: Add the following code to the area

20 means refreshing the page every 20 seconds.
2 .Automatic page jump: add the following code to the area

The 20 fingers jump to the http://www.jb51.net 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

3. When writing Servler, Action and other programs in Java, if you want to return to the page (such as opening the window, after the operation is completed, close the current page and refresh the parent page)

Copy code The code is as follows:

1 PrintWriter out = response.getWriter(); 
2 out.write("<script type=\"text/javascript\">"); 
3 ////子窗口刷新父窗口 
4 out.write("self.opener.location.reload();"); 
5 //关闭窗口 
6 out.write("window.opener=null;"); 
7 out.write("window.close();"); 
8 out.write("</script>");
Copy after login

four , JS script statement to refresh the frame 1. How to refresh the page containing the frame using


## Copy the code The code is as follows:

<script language=JavaScript> 
    parent.location.reload(); 
</script>
Copy after login

2. The child window refreshes the parent window

复制代码 代码如下:

<script language=JavaScript> 
    self.opener.location.reload(); 
</script>
Copy after login


3.如何刷新另一个框架的页面用 (上面的实例以说明了)

复制代码 代码如下:

语句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


4.如果想关闭窗口时刷新或者想开窗时刷新的话,在中调用以下语句即可。

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


复制代码 代码如下:

<script language="javascript"> window.opener.document.location.reload() 
</script> 
 
JavaScript 实现页面跳转的几种方法:
window.location.href="new.jsp?msg=&#39;hello";
self.location=&#39;new.jsp?pam=&#39;omg&#39;;
window.navigate("new.jsp") ;
top.location="show.jsp";
Copy after login

The above is the detailed content of Several methods of page refresh using javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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