Redirect or back to Previous Page without refresh using JavaScript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to redirect or back to Previous Page without Refresh using JavaScript. There is not possible to redirect or go back to Previous Page without refreshing as whenever Page is redirected there will always be a Page reload in browser i.e. old page will be removed and the new Page from Browser History will be loaded in the Browser.
Code for HTML Page
Implementation: There is need to create two HTML pages. On the first HTML page i will place anchor tag. On the HTML page HTML Anchor Link whose HREF attribute is set to Page.
Page 1
<h2>Page 1</h2>
<hr />
<a href="Page2.htm">Redirect to Page 2</a>
Page 2
The HTML Markup consists of an HTML Anchor Link.
<h2>Page 2</h2>
<hr />
<a href="javascript:;">Redirect back to Page 1</a>
Redirect (Go) back to Previous Page without Refresh using JavaScript
The HTML Anchor Link in Page 2 is assigned an OnClick event handler and when clicked, it is redirected to the Previous Page using history.back function in JavaScript.
The history.back function
The history.back is an in-built JavaScript function which belongs to the JavaScript window object.It redirects the Current Page to the Previous Page in the Browser History. Also note that If the Current Page is the First Page in History then there will be no redirection.
<h2>Page 2</h2>
<hr />
<a href="javascript:;">Redirect back to Page 1</a>
Here i am giving complete code for the both HTML pages. You can copy and paste the whole code on your HTML page for enjoys the exaction of the code.
Code for Page1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<h2>Page 1</h2>
<hr />
<a href="Page2.htm">Redirect to Page 2</a>
</body>
</html>
Code for Page2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<h2>Page 2</h2>
<hr />
<a href="javascript:;" onclick = "history.back()">Redirect back to Page 1</a>
</body>
</html>
Conclusion: In above code, I explained that how to redirect or back to Previous Page without Refresh using JavaScript. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment