Home > Developer > Web Develop

JS 5 ways to refresh the current page

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Reload

The reload method, which forces the browser to refresh the current page.
Syntax: Location.reload ([Bforceget])
Parameters: Bforceget, optional parameter, default is False, the current page is taken from the client cache. True, the latest page from the server is taken as a GET, equivalent to the client clicking F5 ("Refresh")

The reload () method is used to reload the current document.
If the method does not specify a parameter, or if the parameter is False, it uses the HTTP header if-modified-since to detect whether the document on the server has changed. If the document has changed, reload () will download the document again. If the document does not change, the method will load the document from the cache. This is exactly the same as when the user clicks the browser's Refresh button.

2.

The 2,replace method, which replaces the currently cached item in history (client) by specifying a URL, so you cannot access the URL that has been replaced by "forward" and "back" after using the Replace method.
Syntax: Location.replace (URL)
Usually used: Location.reload () or history.go (0) to do.
This method is similar to the client Point F5 Refresh page, so when the page method= "POST", a "page expiration" prompt appears.
Because of the security protection mechanism of the session.
When the Location.reload () method is called, the ASPX page is already present in the server's memory, so it must be IsPostback.
If there is such an application: the page needs to be reloaded, that is, the desired page can be re-created on the server and the expectation is not IsPostback.
Here, Location.replace () can complete this task. The Replace page is regenerated on the server each time.
Code: Location.replace (LOCATION.HREF);

To return and refresh the page:

Location.replace (Document.referrer);
Document.referrer//URL of previous page

Do not use History.go (-1), or history.back (), to go back and refresh the page, neither of these methods refreshes the page.
Report:

JavaScript refreshes the page in several ways:

Copy CodeThe code is as follows:
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

Ways to automatically refresh pages:
1, automatic page refresh: Add the following code to the

Copy CodeThe code is as follows:
<meta http-equiv= "Refresh" content= ">"

20 refers to a refresh of the page every 20 seconds.
2, page Auto Jump: Add the following code to the

Copy CodeThe code is as follows:
<meta http-equiv= "Refresh" content= "20;url=http://www.jb51.net" >

Where 20 means jump to http://www.jb51.net page after 20 seconds
3, page automatically refresh JS version

Copy CodeThe code is as follows:
<script language= "JavaScript" >
function Myrefresh ()
{
Window.location.reload ();
}
SetTimeout (' Myrefresh () ', 1000); Specify 1 seconds to refresh
</script>

4,JS script statements that refresh the framework

Copy CodeThe code is as follows:
Refresh the page containing the frame with
<script language=javascript>
Parent.location.reload ();
</script>
child window refreshes parent window
<script language=javascript>
Self.opener.location.reload ();
</script>
(or <a href= "javascript:opener.location.reload ()" > Refresh </a>)
Refresh the page of another frame with
<script language=javascript>
Parent. Another FrameID.location.reload ();
</script>

If you want to refresh when you close the window or if you want to open it, call the following statement in <body>.

Copy CodeThe code is as follows:
<body onload= "Opener.location.reload ()" > Windows Refresh
<body onunload= "Opener.location.reload ()" > Refresh when off
<script language= "JavaScript" >
Window.opener.document.location.reload ()
</script>



First, let's look at a simple example:

The following three pages were named Frame.html, top.html, bottom.html as an example to specify how to do.
Frame.html consists of two pages (top.html) under (bottom.html), the code is as follows:

Copy CodeThe 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>


Now assume that top.html (that is, the page above) has seven buttons to implement the bottom.html (that is, the following page) refresh, you can use the following seven kinds of statements, which is good to see.
The code for the Top.html page is as follows:

Copy CodeThe 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= "Refresh 1" onclick= "Window.parent.frames[1].location.reload ()" ><br>
<input Type=button value= "Refresh 2" onclick= "Window.parent.frames.bottom.location.reload ()" ><br>
<input Type=button value= "Refresh 3" onclick= "window.parent.frames[' Bottom '].location.reload ()" ><br>
<input Type=button value= "Refresh 4" onclick= "Window.parent.frames.item (1). Location.reload ()" ><br>
<input Type=button value= "Refresh 5" onclick= "Window.parent.frames.item (' Bottom '). Location.reload ()" ><br>
<input Type=button value= "Refresh 6" onclick= "Window.parent.bottom.location.reload ()" ><br>
<input Type=button value= "Refresh 7" onclick= "window.parent[' Bottom '].location.reload ()" ><br>
</BODY>
</HTML>


Here is the bottom.html page source code, in order to prove that the page below is indeed refreshed, in the loading page pop up a dialog box.

Copy CodeThe code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> bottom.html </TITLE>
</HEAD>
<body onload= "alert (' I was loaded! ') ' >
</BODY>
</HTML>


Explain:

Copy CodeThe code is as follows:
1.window refers to the current page, for 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, in this case, it refers to framedemo.html.
3.frames is a Window object and is an array. Represents all the sub-pages within the framework.
4.item is the method. Returns the elements inside the array.
5. If the sub-page is also a frame page, inside or another sub-page, then some of the above methods may not work.
Report:
JavaScript refreshes the page in several ways:
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


Second, automatically refresh the page
1. Automatic page refresh: Add the following code to the <meta http-equiv= "Refresh" content= ">"
20 refers to a refresh of the page every 20 seconds.
2. Page Auto-jump: Add the following code to the <meta http-equiv= "Refresh" content= "20;url=http://www.jb51.net" >
Where 20 means jump to http://www.jb51.net page after 20 seconds
3. Page automatically refresh JS version

<textarea id="runcode37981" rows="3" cols="22"></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]


Third, Java in the writing servler,action, and so on, to operate back to the page (such as talking about the window, after the completion of the operation, close the current page, refresh the parent page)

Copy CodeThe code is as follows:
1 PrintWriter out = Response.getwriter ();
2 Out.write ("<script type=\" text/javascript\ ">");
3////child window refreshes the parent window
4 Out.write ("Self.opener.location.reload ();");
5//Close window
6 Out.write ("window.opener=null;");
7 Out.write ("Window.close ();");
8 Out.write ("</script>");


Iv. script statements for JS Refresh framework
1. How to refresh the page containing the frame

Copy CodeThe code is as follows:
<script language=javascript>
Parent.location.reload ();
</script>


2. child window Refreshes parent window

Copy CodeThe code is as follows:
<script language=javascript>
Self.opener.location.reload ();
</script>


3. How to refresh the page of another frame (above example to illustrate)

Copy CodeThe code is as follows:
Statement 1. Window.parent.frames[1].location.reload ();
Statement 2. Window.parent.frames.bottom.location.reload ();
Statement 3. window.parent.frames["Bottom"].location.reload ();
Statement 4. Window.parent.frames.item (1). Location.reload ();
Statement 5. Window.parent.frames.item (' Bottom '). Location.reload ();
Statement 6. Window.parent.bottom.location.reload ();
Statement 7. window.parent[' Bottom '].location.reload ();


4. Call the following statement in <body> if you want to refresh the window or refresh it when you want to open it.
<body onload= "Opener.location.reload ()" >
Refresh when opening windows
<body onunload= "Opener.location.reload ()" >
Refresh when off

Copy CodeThe code is as follows:
<script language= "JavaScript" >
Window.opener.document.location.reload ()
</script>

JS 5 ways to refresh the current page

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
php refresh current page how to refresh page php how to refresh page in chrome php back to previous page without refresh php code to refresh page automatically how to refresh google chrome page ways to make money in gta 5 online

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More