A link refresh page and js refresh page usage examples

1. How to use the link:

Copy code

The code is as follows:

<a href="javascript:history.go(-1);">Return to the previous page</a>
<a href="#top">Refresh current page</a>

The #top effect didn't work for me, but it worked when I directly wrote <a href="">Refresh current page</a>.

2. How to refresh the current page with JS

The reload method forces the browser to refresh the current page.
Syntax: location.reload([bForceGet])

Parameter: bForceGet, optional parameter, default is false, get the current page from the client cache. true, then the latest page is retrieved from the server using GET, which is equivalent to the client clicking F5 ("refresh")

The replace method replaces the item currently cached in the history (client) by the specified URL. Therefore, after using the replace method, you cannot access the replaced URL by "forward" and "backward".
Syntax: location.replace(URL)

In actual application, when refreshing the page, we usually use: location.reload() or history.go(0) to do it. Because this approach is like the client clicking F5 to refresh the page, when the page method="post", a "page expired" prompt will appear. That's because of the Session security protection mechanism. It can be imagined that: when the location.reload() method is called, the aspx page already exists in the server's memory, so it must be IsPostback. If there is such an application: We need to reload the page, that is, we expect the page to be recreated on the server, and we expect it to be Not IsPostback. Here, location.replace() can accomplish this task. The replaced page is regenerated on the server each time.

You can write: location.replace(location.href);

Go back and refresh the page:

Copy code

The code is as follows:

location.replace(document.referrer);
document.referrer //URL of the previous page

Do not use history.go(-1) or history.back(); to return and refresh the page. These two methods will not refresh the page.

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

How to automatically refresh the page:
1. Automatic page refresh: Add the following code to the <head> area
<meta http-equiv="refresh" content="20">
20 means refreshing the page every 20 seconds.

2. Automatic page jump: Add the following code to the <head> area
<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">
20 means jumping to http://www.wyxg.com after 20 seconds.

3. Page automatic refresh js version

Copy code

The code is as follows:

JS refresh frame script statement

Copy code

The code is as follows:

//How to refresh the page containing the frame
<script language=JavaScript>
parent.location.reload();
</script>
//The child window refreshes the parent window
<script language=JavaScript>
self.opener.location.reload();
</script>
(or <a href="javascript:opener.location.reload()">refresh</a> )
//How to refresh the page of another frame
<script language=JavaScript>
parent.anotherFrameID.location.reload();
</script>

If you want to refresh when closing the window or when opening the window, just call the following statement in <body>.

Copy code

The code is as follows:

<body onload="opener.location.reload()"> Refresh when opening the window
<body onUnload="opener.location.reload()"> Refresh on close
<script language="javascript">
window.opener.document.location.reload()
</script>

<<: Problems and solutions for deploying Nginx+KeepAlived cluster dual-active architecture in VMware

>>: 30 excellent examples of color matching in web design

Detailed analysis of each stage of nginx's http request processing

A link refresh page and js refresh page usage examples

Detailed analysis of each stage of nginx's http request processing

How to implement Hover drop-down menu with CSS

A brief discussion on the color matching skills of web pages (a must-read for front-end developers)

Detailed explanation of the use of Gulp.js, a powerful tool for front-end task construction

Ideas and methods for incremental backup of MySQL database

Getting Started: A brief introduction to HTML's basic tags and attributes

JavaScript BOM location object + navigator object + history object

The use of FrameLayout in six layouts

Native js to achieve accordion effect

Solution for adding iptables firewall policy to MySQL service

Recommend

Implementing a shopping cart with native JavaScript

Introduction to the use of base link tag base

How to install JDK8 on Windows

How to generate PDF and download it in Vue front-end

Analysis and solution of MySQL connection throwing Authentication Failed error

What is table partitioning and partitioning? MySql database partitioning and table partitioning method

Detailed explanation of Js class construction and inheritance cases

Detailed explanation of nginx configuration file interpretation

Analysis of the Principle and Method of Implementing Linux Disk Partition

Tutorial on installing Docker in Windows 10 subsystem Ubuntu (WSL) (with pictures and text)

25 Examples of News-Style Website Design

How to use vite to build vue3 application

Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal

CentOS7.x uninstall and install MySQL5.7 operation process and encoding format modification method

MySQL 5.6.23 Installation and Configuration Environment Variables Tutorial